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.

Sign up for GitHub

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

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
bfec4e2
add d3 dependency
ztsai Aug 10, 2020
488af10
implement LineChart
ztsai Aug 13, 2020
f084110
hitbox
ztsai Aug 19, 2020
f06d361
trendplot
ztsai Aug 20, 2020
4ae4eed
resize
ztsai Aug 22, 2020
1e48a14
styling
ztsai Aug 30, 2020
bfd5245
lint
ztsai Aug 30, 2020
6d0d4ef
i18n
ztsai Aug 30, 2020
9b71035
lint
ztsai Sep 1, 2020
50f04ae
move MockDate around to make snapspot consistent
ztsai Sep 1, 2020
43a07ee
Merge branch 'dev' into lineChart
ztsai Sep 1, 2020
7d84bad
fix test
ztsai Sep 2, 2020
d2d40aa
revise per comments
ztsai Sep 5, 2020
7718c69
Merge branch 'dev' into lineChart
ztsai Sep 7, 2020
bc81c7f
css & fix tick positions
ztsai Sep 7, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 19 additions & 16 deletions components/LineChart.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { c, t } from 'ttag';
import { c, t, msgid } from 'ttag';
import { max, curveMonotoneX, scaleTime, scaleLinear, line } from 'd3';
import { startOfDay } from 'date-fns';
import { makeStyles } from '@material-ui/core/styles';
Expand Down Expand Up @@ -73,30 +73,30 @@ const useStyles = makeStyles(theme => ({
borderRadius: '2px',
display: 'none',
fontSize: '12px',
height: '104px',
lineHeight: '20px',
padding: '5px',
textAlign: 'center',
width: '79px',
minWidth: '79px',
position: 'absolute',

'& .tooltip-title': {
borderBottom: `1px solid ${theme.palette.secondary[400]}`,
color: 'white',
},
'& .tooltip-text': {
color: 'white',
lineHeight: '5px',
margin: 0,
},
'& .tooltip-subtitle': {
color: theme.palette.secondary[300],
lineHeight: '5px',
margin: 0,
},

'&.left': {
marginLeft: '40px',
left: '40px',
},
'&.right': {
marginLeft: '-100px',
left: '-100px',
ztsai marked this conversation as resolved.
Show resolved Hide resolved
},
},
},
Expand Down Expand Up @@ -217,6 +217,13 @@ function plotTicks({ scale, x, y, text, roundFn, tickNum, gridline }) {
));
}

const getVisitText = visitNum =>
c('LineChart').ngettext(
msgid`${visitNum} time`,
`${visitNum} times`,
visitNum
);

export default function LineChart({ dataset, width, margin }) {
const classes = useStyles();
const height = Math.max(Math.ceil(width / 6), 75);
Expand Down Expand Up @@ -323,19 +330,15 @@ export default function LineChart({ dataset, width, margin }) {
left: boxWidth / 2 - 5 + 'px',
}}
></div>
<div className={`tooltip ${i < 15 ? 'left' : 'right'}`}>
<div
className={`tooltip ${i < dataset.length / 2 ? 'left' : 'right'}`}
>
<div className="tooltip-title">{formatDate(d.date, true)}</div>
<div className="tooltip-body">
<p className="tooltip-subtitle">{t`Web Visit`}</p>
<p className="tooltip-text">
<span>{d.webVisit}</span>{' '}
<span>{c('LineChart').t`times`}</span>
</p>
<p className="tooltip-text">{getVisitText(d.webVisit)}</p>
<p className="tooltip-subtitle">{t`Line Inquiry`}</p>
<p className="tooltip-text">
<span>{d.lineVisit}</span>{' '}
<span>{c('LineChart').t`times`}</span>
</p>
<p className="tooltip-text">{getVisitText(d.lineVisit)}</p>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion components/LineChart.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const data = [
{ date: new Date('2020-07-28'), webVisit: 18, lineVisit: 2 },
{ date: new Date('2020-07-29'), webVisit: 19, lineVisit: 0 },
{ date: new Date('2020-07-30'), webVisit: 19, lineVisit: 0 },
{ date: new Date('2020-07-31'), webVisit: 2, lineVisit: 0 },
{ date: new Date('2020-07-31'), webVisit: 1, lineVisit: 0 },
{ date: new Date('2020-08-01'), webVisit: 6, lineVisit: 0 },
{ date: new Date('2020-08-02'), webVisit: 3, lineVisit: 0 },
{ date: new Date('2020-08-03'), webVisit: 6, lineVisit: 0 },
Expand Down
12 changes: 6 additions & 6 deletions components/TrendPlot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { t, jt } from 'ttag';
import { t } from 'ttag';
import { useState } from 'react';
import AutoSizer from 'react-virtualized-auto-sizer';
import { makeStyles } from '@material-ui/core/styles';
Expand Down Expand Up @@ -127,22 +127,22 @@ export default function TrendPlot({ data }) {
<Box className={`${classes.label} plotLabel`}>{t`past 31 days`}</Box>
<Hidden xsDown>
<Box className={`${classes.label} webLabel `}>
{jt`Web Visit: ${totalWebVisits}`}
{t`Web Visit: ${totalWebVisits}`}
</Box>
<Box className={`${classes.label} lineLabel`}>
{jt`Line Inquery: ${totalLineVisits}`}
{t`Line Inquery: ${totalLineVisits}`}
</Box>
</Hidden>
<Hidden smUp>
<Box className={`${classes.label} webLabel `}>
{jt`Web: ${totalWebVisits}`}
{t`Web: ${totalWebVisits}`}
</Box>
<Box className={`${classes.label} lineLabel`}>
{jt`Line: ${totalLineVisits}`}
{t`Line: ${totalLineVisits}`}
</Box>
</Hidden>
<Box flexGrow={1} className={`${classes.label} totalLabel`}>
{jt`Total Visit: ${totalVisits}`}
{t`Total Visit: ${totalVisits}`}
{showPlot ? (
<KeyboardArrowDownIcon onClick={() => setPlotShow(false)} />
) : (
Expand Down
Loading