Tooltip fixed

[SahanAmarsha]

Sorry for taking so much time to make a pr, have been busy lately.

Issue: #10

(+)Chart.js

const CustomToolTip = ({active, payload, label}) => {
    if (active) {
        return (
            <div className="custom-tooltip">
                <p className="label">{label}</p>
                <table>
                    <tr>
                        <td>
                            <div className="sb" style={{"background-color": payload[0].fill}}></div>
                        </td>
                        <td>
                            <p className="data">{payload[0].name}: {payload[0].value}</p></td>
                    </tr>
                    <tr>
                        <td>
                            <div className="sb" style={{"background-color": payload[1].fill}}></div>
                        </td>
                        <td>
                            <p className="data"
                               style={{"color": payload[1].fill}}>{payload[1].name}: {payload[0].value}</p></td>
                    </tr>
                    <tr>
                        <td>
                            <div className="sb" style={{"background-color": payload[2].fill}}></div>
                        </td>
                        <td>
                            <p className="data"
                               style={{"color": payload[2].fill}}>{payload[2].name}: {payload[0].value}</p></td>
                    </tr>
                </table>
            </div>

        );
    }
    return null;
}

(+)Tooltip.scss

[emibcn]

I have just created a PR against your branch at SahanAmarsha#1

• Fix spaces and indentation back to original. If you want to fix it, open a PR only for that, else, it's impossible to follow what really changed. Also, JS indent standard is 2 spaces.
• Move Tooltip logic to a separate JSX file.
• Use UL/LI instead of TABLE. Table is only for data visualization, not for decoration (that was the very old Internet).
• Use MaterialUI theming system instead of an external CSS (not really a SCSS).
• Use more React Component composition
• Use payload.map instead of repeating.

You can apply it (even with squash to reduce the amount of commits and changes), and then I'll re-review it here.

[emibcn]

Note:

Using MaterialUI theming allows to change the theme easily. Currently (waiting for #5), it can be done setting the App state.theme to "dark", editing the file in the dev environment, or changing the value in the chrome development tools, in the React Components tab.

This is how it looks with the PR I've sent to your fork with "dark" theme:

This is how it looks with the PR I've sent to your fork with "light" theme:

[emibcn]

Thanked!

[SahanAmarsha]

Learned a lot from this. Thanks!
Sorry for the mistakes. I am a newbie programmer.

[emibcn]

I don't think you should apologize for the mistakes, especially if you learned (from them and/or other stuff)!

I am learning a lot with this project, too, both programming and as maintainer in a project with collaborators. This probably is a little bit confusing for newcomers to this project. I apologize for that ;)