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

Initial implementation of LineChart #315

Merged
merged 15 commits into from
Sep 8, 2020
Merged

Initial implementation of LineChart #315

merged 15 commits into from
Sep 8, 2020

Conversation

ztsai
Copy link
Contributor

@ztsai ztsai commented Aug 15, 2020

Merging this PR to feature branch instead of dev because it's still a work in progress, and blocked by designs.
However, I would like to check with you and see if the current implementation aligns with the current coding style/standard before moving further, as we have discussed a few times about how to integrate d3 with React.

Screen Shot 2020-08-15 at 4 34 40 PM

@ztsai ztsai linked an issue Aug 15, 2020 that may be closed by this pull request
@ztsai ztsai requested a review from MrOrz August 15, 2020 09:07
Copy link
Member

@MrOrz MrOrz left a comment

Choose a reason for hiding this comment

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

The implementation looks lean and beautiful. Thanks!
I have added some comments regarding imports and edge case of input data.

components/LineChart.js Outdated Show resolved Hide resolved
components/LineChart.stories.js Show resolved Hide resolved
@ztsai ztsai marked this pull request as draft August 17, 2020 06:06
@ztsai
Copy link
Contributor Author

ztsai commented Aug 17, 2020

Thanks a lot for the feedback! I'm marking this as WIP and will hold off until we get confirmation on the design.

@ztsai ztsai changed the base branch from article-stats-feature-branch to dev August 30, 2020 11:57
@ztsai
Copy link
Contributor Author

ztsai commented Aug 30, 2020

Screen Shot 2020-08-30 at 8 18 31 PM
Screen Shot 2020-08-30 at 8 18 52 PM
Screen Shot 2020-08-30 at 8 18 43 PM
Screen Shot 2020-08-30 at 8 21 08 PM

@ztsai ztsai marked this pull request as ready for review August 30, 2020 12:25
@ztsai ztsai requested a review from MrOrz August 30, 2020 12:25
Storyshots.test.js Outdated Show resolved Hide resolved
Copy link
Member

@MrOrz MrOrz left a comment

Choose a reason for hiding this comment

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

The chart is looking pretty good!

I have added some comments regarding some details of CSS and i18n.

components/LineChart.js Outdated Show resolved Hide resolved
components/LineChart.js Outdated Show resolved Hide resolved
components/LineChart.js Outdated Show resolved Hide resolved
components/LineChart.js Outdated Show resolved Hide resolved
components/LineChart.js Outdated Show resolved Hide resolved
components/TrendPlot.js Outdated Show resolved Hide resolved
Copy link
Member

@MrOrz MrOrz left a comment

Choose a reason for hiding this comment

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

I found that currently the red cursor will not align with the x-axis:
image

To make them aligned, there should be 11 x-axis ticks for 31 days. For example, for 9/6 the ticks should be:

8/7 8/10 8/13 8/16 8/19 8/22 8/25 8/28 8/31 9/3 9/6

components/LineChart.js Outdated Show resolved Hide resolved
@MrOrz
Copy link
Member

MrOrz commented Sep 7, 2020

Recently I have rolled back apollo client to version 2. Please also rebase the PR and change apollo-client 3 dependencies accordingly. More specifically,

  • import { gql } from '@apollo/client' should be import gql from 'graphql-tag'
  • import { useQuery } from '@apollo/client' should be import { useQuery } from '@apollo/react-hooks'

@ztsai ztsai requested a review from MrOrz September 7, 2020 11:11
Copy link
Member

@MrOrz MrOrz left a comment

Choose a reason for hiding this comment

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

LGTM now :) Thanks for the fix and let's :shipit:

const ticks = getTicks(scale, roundFn, tickNum);
return ticks.map((tick, i) => (
<TickGroup
key={`${tick - 0}_${i}`}
Copy link
Member

Choose a reason for hiding this comment

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

What does this -0 for?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

tick could be a number or a date, -0 remains the same if it's a number and converts date into epoch seconds otherwise.
it's not necessary, just makes the key look cleaner

Copy link
Member

@MrOrz MrOrz Sep 8, 2020

Choose a reason for hiding this comment

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

I see. We could use unary + to convert things to number, it's shorter ;)

@ztsai ztsai merged commit 5f83c8c into dev Sep 8, 2020
@ztsai ztsai deleted the lineChart branch September 8, 2020 07:27
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.

implement line chart for Google analytics stats on Article page
2 participants