Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tooltip fixed #30

Merged
merged 3 commits into from
Oct 13, 2020
Merged

Tooltip fixed #30

merged 3 commits into from
Oct 13, 2020

Conversation

SahanAmarsha
Copy link
Contributor

New-ToolTip

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

SahanAmarsha and others added 2 commits October 13, 2020 02:20
- Use MaterialUI great theming system (makeStyle/useStyle) instead of external (s)CCS
- Use more React composition
- Fix indentation to 2 spaces
- Fix space changes: they might not be ok, but your issue/PR is not about changing spaces
- Move all CustomTooltip logic to a separate JSX file
Copy link
Owner

@emibcn emibcn left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Owner

emibcn commented Oct 13, 2020

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:
image

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

@emibcn emibcn merged commit 83294c2 into emibcn:master Oct 13, 2020
@emibcn
Copy link
Owner

emibcn commented Oct 13, 2020

Thanked!

@SahanAmarsha
Copy link
Contributor Author

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

@emibcn
Copy link
Owner

emibcn commented Oct 13, 2020

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 ;)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants