day ? w : 0}
10 | x2={this.props.w - (endDay + 1 < day ? w : 0)}
11 | y1={day * w}
12 | y2={day * w}
13 | key={day}
14 | />
15 | );
16 | return (
17 | {lines}
18 | );
19 | }
20 | }
21 |
22 | class VerticalLines extends Component {
23 | render() {
24 | const {noOfWeeks, startDay, endDay, h, margin, rectW} = this.props;
25 | const w = rectW;
26 | const lines = [...Array(noOfWeeks + 1).keys()].map((week) =>
27 | ()
34 | );
35 | return (
36 | {lines}
37 | );
38 | }
39 | }
40 |
41 | export { HorizontalLines, VerticalLines };
--------------------------------------------------------------------------------
/src/components/Summary.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { getSum, getAverages } from './../processors/analysis';
3 | import { pronoun, capitalize, pluralize } from './../processors/formats';
4 | import { getColorForTwoDirection } from './../processors/colors';
5 |
6 | class Summary extends Component {
7 | render() {
8 | let { data, author, pastVerb, year, type, metric, considerFrequency, gender, abbr, color, hasNegative, isReverse } = this.props;
9 | const sum = getSum(data);
10 | const averages = getAverages(sum, data.length, year);
11 | if (hasNegative) {
12 | color = getColorForTwoDirection(sum < 0 && isReverse || !isReverse && sum >= 0);
13 | }
14 | return (
15 |
16 |
17 | {capitalize(author)} {pastVerb}
18 | {type === 'duration' ? ` for ` : ` total `}
19 | {pluralize(sum, metric)}:
20 | {` `}in average {pluralize(averages.day, metric)}
21 | {` `}per {considerFrequency ? ` an active` : `a`} day.
22 |
23 | {` `}Over the whole year, {pronoun(gender, false)} {pastVerb}
24 | {` `}{averages.week}{abbr}/week, and
25 | {` `}{averages.month}{abbr}/month.
26 |
27 |
37 |
Close
38 |
{list}
39 |
35 | { capitalize(author) }'s record {type} in a {unit} is
36 | { ` ` } {pluralize(max.val, metric)}:
37 | { ` ` } achieved { conj[unit] } {maxActiveList}
38 |
39 | );
40 | }
41 | }
42 |
43 | export default Max;
44 |
--------------------------------------------------------------------------------
/src/components/ByDay.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import BarChart from './vis/BarChart';
3 | import {capitalize} from './../processors/formats';
4 |
5 | class ByDay extends Component {
6 | constructor(props) {
7 | super(props);
8 | this.state = {
9 | selection: 'value'
10 | };
11 | this.onChange = this.onChange.bind(this);
12 | }
13 |
14 | onChange(e) {
15 | this.setState({selection: e.target.value});
16 | }
17 |
18 | render() {
19 | const {topic, considerFrequency, metric, type, data, color, dims} = this.props;
20 |
21 | return (
22 |
23 |
24 | See the {capitalize(topic)} Data by Day {!considerFrequency && ` (total ${type} in ${metric})`}
25 |
26 |
38 |
39 |
40 |
41 |
24 | {renderHTML(unitSentence)}
25 | {unit === 'day' &&
26 | This means in average
27 | {` `}{(stats.active[unit] / 52).toFixed(1)} days/week
28 | {` `}and {(stats.active[unit] / 12).toFixed(1)} days/month.
29 |
30 | }
31 | {consec.active.count > 1 &&
Record for consecutive {unit}s of {topic} is
32 | {` `}{pluralize(consec.active.count, unit)}
33 |
34 | , happened {consec.active.list.length} time
35 | {consec.active.list.length > 1 ? 's: ' : ': '}
36 | {consecActiveList}.
37 |
}
38 | {consec.inactive.count > 1 &&
39 | Longest break was {pluralize(consec.inactive.count, unit)}:
40 | {` `}{consecInactiveList}.
41 |
}
42 |
26 |
57 |
58 | );
59 | }
60 | }
61 |
62 | export default Calendar;
--------------------------------------------------------------------------------
/src/components/vis/ToolTip.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {humanizeUnitId, locale} from './../../processors/formats';
3 |
4 | class ToolTip extends Component {
5 |
6 | constructor(props) {
7 | super(props);
8 | this.state = {x: 0, y: 0, textX: 0, textY: 0, path: ''};
9 | }
10 |
11 | componentDidMount() {
12 | const {margin, unit, rectW, x, y, w} = this.props;
13 | const xPos = margin.left + x
14 | + (unit === 'day' && rectW / 2)
15 | + (unit === 'month' && rectW * 2);
16 | const yPos = margin.legend + margin.top + y + rectW / 3;
17 |
18 | //max value according to dim
19 | const cW = rectW / 3 * 2; //width of chevron
20 | const cH = rectW / 2; //height of chevron
21 | //tooltip width and height, excluding chevron dim
22 | let toolTipW = document.getElementById('tt-label').clientWidth + cW;
23 | let toolTipH = margin.legend + margin.top;
24 | const distToC = x * toolTipW / w;
25 |
26 | //cehvron end point, then cW up, then to the left, up, right, bottom, left, then close
27 | const path = `M 0 0 l -${cW / 2} -${cH}
28 | h ${-distToC}
29 | v ${-(toolTipH - cH)}
30 | h ${toolTipW + cW}
31 | v ${toolTipH - cH}
32 | h ${-(toolTipW - distToC)} Z`;
33 | const textX = -distToC + cW / 2;
34 | const textY = -(toolTipH - cH / 2);
35 | this.setState({x: xPos, y: yPos, textX, textY, path});
36 | }
37 |
38 | render() {
39 | let {year, unit, id, val, abbr, decimal, altVal, altAbbr} = this.props;
40 | year = unit === 'day' ? null : year;
41 | const {x, y, textX, textY, path} = this.state;
42 | return (
43 |
44 |
45 |
50 | {humanizeUnitId(year, unit, id)}
51 |
52 | {locale(val, decimal)}{abbr}
53 | {altVal != null && ` (${locale(altVal, decimal)}${altAbbr})`}
54 |
55 |
56 |
57 | );
58 | }
59 | }
60 |
61 | export default ToolTip;
--------------------------------------------------------------------------------
/src/less/colors.less:
--------------------------------------------------------------------------------
1 | @main: #212529;
2 | @sub: #ced4da;
3 |
4 | @blue: #F0FFFF, #87CEEB, SlateBlue, #031968;
5 | @red: lightyellow, orange, deeppink, darkred;
6 | @green: lightyellow, lightgreen, darkgreen;
7 | @teal: lightyellow, turquoise, Teal;
8 | @purple: lightyellow, coral, mediumvioletred, purple;
9 | @brown: lightyellow, LightSalmon, darkOrange, Brown;
10 |
11 | @two-red: #ffffbf, #fee090, #fc8d59, #d73027;
12 | @two-blue: #ffffbf, #e0f3f8, #91bfdb, #4575b4;
13 |
14 | .blue {
15 | .author, a { color: extract(@blue, 4); }
16 | i { background-color: extract(@blue, 4); }
17 | ii { background-color: extract(@blue, 2); }
18 | .text-highlight a { color: extract(@blue, 2) !important;}
19 | }
20 | .red {
21 | .author, a { color: extract(@red, 4); }
22 | i { background-color: extract(@red, 4); }
23 | ii { background-color: extract(@red, 2); }
24 | .text-highlight a { color: extract(@red, 2) !important; }
25 | }
26 | .green {
27 | .author, a { color: extract(@green, 3); }
28 | i { background-color: extract(@green, 3); }
29 | ii { background-color: extract(@green, 2); }
30 | .text-highlight a { color: extract(@green, 2) !important; }
31 | }
32 | .teal {
33 | .author, a { color: extract(@teal, 3); }
34 | i { background-color: extract(@teal, 3); }
35 | ii { background-color: extract(@teal, 2); }
36 | .text-highlight a { color: extract(@teal, 2) !important; }
37 | }
38 | .purple {
39 | .author, a { color: extract(@purple, 4); }
40 | i { background-color: extract(@purple, 4); }
41 | ii { background-color: extract(@purple, 2); }
42 | .text-highlight a { color: extract(@purple, 2) !important; }
43 | }
44 | .brown {
45 | .author, a { color: extract(@brown, 4); }
46 | i { background-color: extract(@brown, 4); }
47 | ii { background-color: extract(@brown, 3); }
48 | .text-highlight a { color: extract(@brown, 3) !important; }
49 | }
50 |
51 | .two-red {
52 | .author, a { color: extract(@two-red, 4); }
53 | i { background-color: extract(@two-red, 4); }
54 | ii { background-color: extract(@two-red, 3); }
55 | .text-highlight a { color: extract(@two-red, 3) !important; }
56 | }
57 |
58 | .two-blue {
59 | .author, a { color: extract(@two-blue, 4); }
60 | i { background-color: extract(@two-blue, 4); }
61 | ii { background-color: extract(@two-blue, 3); }
62 | .text-highlight a { color: extract(@two-blue, 3) !important; }
63 | }
--------------------------------------------------------------------------------
/src/processors/dimensions.js:
--------------------------------------------------------------------------------
1 | import moment from 'moment';
2 |
3 | const getCalendarInfo = (year) => {
4 | const startDate = moment(`${year}0101`, 'YYYYMMDD');
5 | const endDate = moment(`${year}1231`, 'YYYYMMDD');
6 | const startWeek = startDate.clone().startOf('week');
7 | const endWeek = endDate.clone().add(7, 'day').startOf('week');
8 | const noOfWeeks = endWeek.diff(startWeek, 'weeks');
9 |
10 | return {
11 | startDay: startDate.day(),
12 | endDay: endDate.day(),
13 | noOfWeeks,
14 | year,
15 | };
16 | }
17 |
18 | let containerW;
19 |
20 | const getVisDimensions = (year) => {
21 |
22 | const calendarInfo = getCalendarInfo(year);
23 | const {noOfWeeks} = calendarInfo;
24 |
25 | containerW = containerW || document.getElementById('width').clientWidth - 30;
26 |
27 | let margin = {
28 | legend: 20,
29 | top: 40,
30 | left: 60,
31 | bottom: 8
32 | };
33 |
34 | const rectW = Math.max(Math.floor((containerW - margin.left) / noOfWeeks), 20);
35 | margin.right = rectW;
36 | const w = rectW * noOfWeeks;
37 | margin.left = Math.max(40, containerW - w - margin.right);
38 |
39 | return {
40 | rectW,
41 | margin,
42 | containerW,
43 | w: noOfWeeks * rectW,
44 | h: rectW * 7,
45 | };
46 |
47 | }
48 |
49 | const getPoints = (rectW, h, margin, year, month, sd, sw) => {
50 | const startDay = sd != null ? sd : moment([year, month]).day();
51 | const startWeek = sw || moment([year, month]).week() - 1;
52 |
53 | const x = startWeek * rectW;
54 | const y = startDay * rectW;
55 |
56 | const sY = h + margin.bottom;
57 | const diff = startDay > 0 ? rectW : 0;
58 | const eY = -margin.top;
59 |
60 | return {x, y, sY, diff, eY, startDay, startWeek};
61 | }
62 |
63 | const getPath = (props, month) => {
64 | const p = getPoints(props.rectW, props.h, props.margin, props.year, month);
65 | return `M ${p.x}, ${p.sY} V ${p.y} h ${p.diff} V ${p.eY}`;
66 | }
67 |
68 | const getAreaPath = (rectW, h, margin, year, month) => {
69 | const sp = getPoints(rectW, h, margin, year, month);
70 | let np;
71 | if (+month < 11) {
72 | np = getPoints(rectW, h, margin, year, +month + 1);
73 | } else {
74 | // December has 31 days, 31 % 7 = 3
75 | const nysd = (sp.startDay + 3) % 7;
76 | // if the new year's first day is Sunday or Monday, diff should be rectW
77 | const nyw = sp.startWeek + (sp.startDay >= 4 ? 5 : 4);
78 | np = getPoints(rectW, h, margin, year, null, nysd, nyw);
79 | }
80 | return `M ${sp.x}, ${h} V ${sp.y} h ${sp.diff} V 0 H ${np.x} h ${np.diff} V ${np.y} h ${-np.diff} V ${h} Z`;
81 | }
82 |
83 | export { getCalendarInfo, getVisDimensions, getPoints, getPath, getAreaPath };
--------------------------------------------------------------------------------
/src/processors/colors.js:
--------------------------------------------------------------------------------
1 | import chroma from 'chroma-js';
2 |
3 | const colors = {
4 | blue: ['#F0FFFF', '#87CEEB', 'SlateBlue', '#031968'],
5 | red: ['lightyellow', 'orange', 'deeppink', 'darkred'],
6 | green: ['lightyellow', 'lightgreen', 'darkgreen'],
7 | teal: ['lightyellow', 'turquoise', 'Teal'],
8 | purple: ['lightyellow', 'coral', 'mediumvioletred', 'purple'],
9 | brown: ['lightyellow', 'LightSalmon', 'darkOrange', 'Brown']
10 | };
11 |
12 | const getColorForTwoDirection = (isReverse) => {
13 | return isReverse ? 'two-blue' : 'two-red';
14 | };
15 |
16 | const getRandomColor = () => {
17 | const themes = Object.keys(colors);
18 | const random = Math.floor(Math.random() * themes.length);
19 | return themes[random];
20 | }
21 |
22 | const getColorBrewer = (setting, color) => {
23 | const { steps, distance } = setting;
24 | const brewer = chroma.bezier(colors[color]).scale().domain(steps);
25 | return steps.map(step => brewer(step + distance / 2));
26 | }
27 |
28 | const getTwoColorsBrewer = (setting, isReverse) => {
29 | // from red to blue
30 | const { steps, distance, min, max } = setting;
31 | let colorScale = ['#d73027', '#f17d4e', '#febf7d', '#ffffbf', '#b5d0de', '#7ba2cc', '#2954b8'];
32 | if (isReverse) {
33 | // if positive number means negative meaning, reverse.
34 | colorScale.reverse();
35 | }
36 | const minNormalized = Math.abs(min) < Math.abs(max) ? -1 * max : min;
37 | const maxNormalized = Math.abs(min) > Math.abs(max) ? -1 * min : max;
38 | const brewer = chroma.scale(colorScale).domain([minNormalized, maxNormalized]);
39 | return steps.map(step => brewer(step + distance / 2));
40 | }
41 |
42 | const getBlockColor = (brewer, steps, value) => {
43 | // out of legend boundary
44 | let color;
45 | if (value > steps[steps.length - 1]) {
46 | color = 'black';
47 | } else if (value < steps[0]) {
48 | color = '#ced4da';
49 | } else {
50 | let index = 0;
51 | for (let i = 1; i < steps.length; i++) {
52 | if (value < steps[i]) {
53 | index = i - 1;
54 | break;
55 | }
56 | }
57 | color = brewer[index]
58 | }
59 | return color;
60 | }
61 |
62 | const twoColors = {
63 | 'two-red': '#d73027',
64 | 'two-blue': '#4575b4',
65 | };
66 |
67 | const getMaxColor = (c) => {
68 | // two directional charts, get the opposite color for the positive values
69 | if (c.slice(0, 3) === 'two') {
70 | return c === 'two-blue' ? twoColors['two-red'] : twoColors['two-blue'];
71 | } else {
72 | return colors[c][colors[c].length - 1];
73 | }
74 | }
75 |
76 | const getColorForNegative = (c) => {
77 | return twoColors[c];
78 | }
79 |
80 | export {
81 | colors,
82 | getColorForTwoDirection,
83 | getRandomColor,
84 | getColorBrewer,
85 | getTwoColorsBrewer,
86 | getBlockColor,
87 | getMaxColor,
88 | getColorForNegative,
89 | };
90 |
--------------------------------------------------------------------------------
/src/components/Main.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import Legend from './vis/Legend';
3 | import Calendar from './Calendar';
4 | import Max from './Max';
5 | import Stats from './Stats';
6 | import {getCalendar} from './../processors/analysis';
7 | import {capitalize} from './../processors/formats';
8 | import {getColorBrewer, getTwoColorsBrewer} from './../processors/colors';
9 | import {Icon} from 'react-fa';
10 |
11 |
12 | class Visualization extends Component {
13 | constructor(props) {
14 | super(props);
15 | this.onUnitChange = this.onUnitChange.bind(this);
16 | this.state = {unit: 'day'};
17 | }
18 |
19 | onUnitChange(e) {
20 | this.setState({unit: e.target.value});
21 | }
22 |
23 | render() {
24 | const {setting, data, dims} = this.props;
25 | const {year, color, abbr, alt_abbr, hasNegative, isReverse, decimal} = setting;
26 | const {unit} = this.state;
27 | const calendar = getCalendar(data, year, hasNegative, isReverse);
28 | const brewer = hasNegative ?
29 | getTwoColorsBrewer(calendar.range[unit], isReverse) :
30 | getColorBrewer(calendar.range[unit], color, hasNegative, isReverse);
31 |
32 | return (
33 |
34 |
35 | {['day', 'week', 'month'].map(u =>
36 |
42 | {capitalize(u)}
43 | )
44 | }
45 |
46 |
47 |
55 |
56 |
57 | Slide calender
58 |
59 |
70 |
74 | {setting.considerFrequency &&
75 |
80 | }
81 |
61 |
62 |
63 |
64 | Datasets
65 |
66 |
67 |
68 |
69 |
70 |
71 |
{capitalize(author)}'s
72 |
{capitalize(topic)} in {year}
73 |
74 |
78 |
83 |
88 |
113 |