import { ChartSelector, ChartWithFilter } from 'synapsefi-dev-charts';


<ChartSelector
    title="Deposit Activity" // Title of Chart
    keys={[
      "Balance", 
      "Count"  // Turns into buttons, does not have to have to match yAxis prop on <ChartWithFilter>, but index has to match.
    ]}
>
    <ChartWithFilter 
        report={reportForThisChart}
        yAxis="Balance"
    />
    <ChartWithFilter 
        report={reportForThisChart}
        yAxis="Count"
    />
</ChartSelector>

Report props format:

• Each object in report array is one line.
• Each object in "data" array is one point on the line.

[
  {
    "id": "SYNAPSE-US",
    "color": "#FF8A00",
    "data": [
      {
        "x": "03/01/2020",
        "y": 58575241.58
      },
      {
        "x": "03/02/2020",
        "y": 58574978.64
      },
    ]
  },
  {
    "id": "CUSTODY-US",
    "color": "#008759",
    "data": [
      {
        "x": "03/01/2020",
        "y": 0
      },
      {
        "x": "03/02/2020",
        "y": 0
      },
    ]
  },
]

Demo with props labeled

Markers

<ChartWithFilter 
  report={RDCReportReport}
  yAxis="Percent"
  markers={[
    {
      value: 10,
      legend: 'All Returns Threshold', // the line of text on the dotted line
      id: 'All Returns', // marker id must match the line's id for the line to show
    },
    {
      value: 2,
      legend: 'Admin Returns Threshold',
      id: 'Admin Returns',
    },
    {
      value: 0.5,
      legend: 'Unauth Returns Threshold',
      id: 'Unauth Returns',
    },
  ]}
/>

Functions

/**
 * transforms raw report from the api into report used by chart
 * @param {array} reportRaw the raw report from api
 * @param {string} key the first key in the report object, 'ach_report', 'balances' etc
 * @param {string} subKey optional, the final key in the object, such as 'count', 'balance', etc
 */
reportParser(reportRaw, key, subKey)

const reportRaw = [
  {
    "_id": {
      "$oid": "5e5b6e7d6973745715ba49fe"
    },
    "_v": 1,
    "ach_report": { // key
      "admin_returns": 0, // no subKey needed
      "admin_returns_amount": 0,
      "ml_returned_count": 0,
      "ml_returned_sum": 0,
      "returned_count": 6,
      "returned_sum": 600.6,
      "settled_count": 23,
      "settled_sum": 210.64,
      "unauth_returns": 0,
      "unauth_returns_amount": 0
    },
    "balances": { // key
      "CLEARING-US": {
        "balance": 0,  // subKey
        "count": 7,
        "pending": 0
      },
      "CUSTODY-US": {
        "balance": 0,
        "count": 2,
        "pending": 0
      }
    },
    ...
  }
]

/**
 * remove all lines that are entirely zero, null, or undefined
 * @param {array} parsedData the output of reportParser function
 */
removeDataOfZero(parsedData)


/**
 * snake car to capitalized case, accounts for acronyms and caps all letters
 * @param {array} string admin_return -> Admin Return
 */
snakeToCap(string)

Default Graphics

<DefaultGraphics
  mainText="No Range and Client Selected" // optional
  subText="Please Select" // optional
  graphic="calendar" // optional
/>

Customize the order and appearance of keys

<ChartWithFilter 
  report={reportForThisChart}
  yAxis="Balance"
  keyOrder={
    [
      { key: "CUSTODY-US", text: 'custoday test'},
      { key: "SYNAPSE-US", text: 'synapsef us test'},
    ]
  }
/>