# Technical Document - Profit Chat
## Purpose
This document gives a clear understanding on the approach and implementation details for Profit chart.

## Technologies used
- [**React Js**](https://reactjs.org) - To build UI components
- [**Victory**](https://formidable.com/open-source/victory/) - Chart library

### Why **Victory** library?
Advantages of using this library
- Pure React component
- Highly customisable
- Open source and has a large community support
- Simple to use
- Easy override of css styles with CSS-in-JS syntax.

### Alternative libraries
#### D3.Js
D3.Js is one of the famous & best JS chart library to build from scratch and it is highly customisable. But it is not React component based.

There are many other D3.Js based react component libraries but the level of customisation is less compared to Victory.

#### Uber/react-vis
This is another popular react component based chart library, but there is no much customisation available.

#### Recharts
Another react component based chart library, but there is no direct customisation available.
Also, no better style customisation exist with it.

## Design

## Detailed design

### List of components
- Main Bar chart
- Stacked bar chart (2 counts)
- Data cards

#### Main Bar chart

Victory provides direct `<VictoryBar />` component to implement it. To get the rounded corners on top-left, we can use `cornerRadius` property of it and use `style` property for css styling.

Sample code:

**index.js**
<MainBarChart data={data} />

**MainBarChart.js**
<VictoryChart aria-label="Main Bar Chart">
    <VictoryChart
      theme={VictoryTheme.material}
      domainPadding={{ x: 15 }}
    >
      <VictoryBar
        cornerRadius={{ topLeft: (d) => d.x * 4 }}
        style={{
          data: {
            fill: "#c43a31",
            width: 25
          }
        }}
        data={this.props.data}
      />
    </VictoryChart>
    <VictoryAxis />
</VictoryChart>

`VictoryAxis` component can be used to provide the same level of customisation for both x and y axis.

#### Stacked bar chart

There are 2 stacked bar charts found in the design. A reusable single component can be used to achieve them.

The size and data for the chart can be determined with the property passed to the component.

Victory provides `<VictoryStack />` component to implement it and it's `style` property can be used to get the curved edges on both ends.

Sample code:

**index.js**
<StackedbarChart size="default" data="data1" />
<StackedbarChart size="large" data="data2" />

**StackedbarChart.js**
<VictoryChart aria-label="Stacked Bar Chart">
    <VictoryStack
      colorScale={["tomato", "orange", "gold"]}
    >
      <VictoryBar
        data={this.props.data]
      />
    </VictoryStack>
</VictoryChart>

The `labels` property for `<VictoryBar />` can be used to get those labels from design and more customisation can be done with `style` property of it.

#### Data cards
There are 4 data cards found on top of the design. A single reusable component can be used to get all four. Based on the propery we pass to the component it changes the layout of the card.

The wave like structure can be brought in with Victory's `<VictoryLine />` component. To get a smooth wave like curve, we need to set the property `interpolation` to `natural`.

Sample code:

**index.js**
<DataCard data={data1}>
    <DashedLevel />    
</DataCard>
<DataCard data={data2}>
    <WaveChart data={data2.waveData} />
</DataCard>
...

**WaveChart.js**
<VictoryChart aria-label="Wave Chart">
    <VictoryLine
      interpolation="natural"
      data={this.props.data}
    />
</VictoryChart>

**DataCard.js**
<div aria-label="Data Card">
    {this.props.children}
    <div>
        ...
    </div>
</div>

## Overall layout styling

Overall structuring of the layout placing each components in its place can be pretty simple with common HTML and CSS. Note, CSS Grids would make the layout easier to implement.