Skip to content

Commit

Permalink
Merge pull request #759 from hackforla/580-FRONT-DescriptiveTooltips
Browse files Browse the repository at this point in the history
added descriptive tooltips throughout app
  • Loading branch information
adamkendis authored Jul 30, 2020
2 parents 048bfab + ef3af29 commit 1495013
Show file tree
Hide file tree
Showing 30 changed files with 206 additions and 130 deletions.
15 changes: 14 additions & 1 deletion src/components/Chart/Chart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import ChartJS from 'chart.js';
import 'chartjs-chart-box-and-violin-plot';
import ChartJSDataLabels from 'chartjs-plugin-datalabels';
import { DynamicTooltip } from '@components/common/Tooltip';
import InfoTitle from '@components/common/InfoTitle';
import { adapter } from './ChartTooltip';
import defaults from './defaults';
import { chartAreaPlugin } from './plugins';
Expand Down Expand Up @@ -97,6 +98,8 @@ class Chart extends React.Component {
className,
height,
title,
titleInfo,
titleInfoPosition,
exportButton,
} = this.props;

Expand All @@ -118,7 +121,13 @@ class Chart extends React.Component {

return (
<div className={clx('chart', className)}>
{ title && <h1>{ title }</h1> }
{ title && (
<InfoTitle
title={title}
infoText={titleInfo}
position={titleInfoPosition}
/>
)}
<div style={canvasWrapStyle}>
<canvas ref={this.canvasRef} />
<div style={exportWrapStyle}>{ exportButton }</div>
Expand All @@ -136,6 +145,8 @@ Chart.propTypes = {
data: PropTypes.shape({}).isRequired,
options: PropTypes.shape({}).isRequired,
title: PropTypes.string,
titleInfo: PropTypes.string,
titleInfoPosition: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
height: PropTypes.number,
datalabels: PropTypes.bool,
exportButton: PropTypes.element,
Expand All @@ -145,6 +156,8 @@ Chart.propTypes = {

Chart.defaultProps = {
title: undefined,
titleInfo: undefined,
titleInfoPosition: 'right',
height: undefined,
datalabels: false,
exportButton: null,
Expand Down
5 changes: 5 additions & 0 deletions src/components/Chart/PieChart.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import Chart from './Chart';

const PieChart = ({
title,
titleInfo,
sectors,
addLabels,
exportable,
Expand Down Expand Up @@ -115,6 +116,8 @@ const PieChart = ({
type="pie"
className="pie"
title={title}
titleInfo={titleInfo}
titleInfoPosition="top"
data={chartData}
options={chartOptions}
datalabels
Expand All @@ -132,6 +135,7 @@ PieChart.propTypes = {
color: PropTypes.string,
})).isRequired,
title: PropTypes.string,
titleInfo: PropTypes.string,
addLabels: PropTypes.bool,
exportable: PropTypes.bool,
componentName: PropTypes.string,
Expand All @@ -140,6 +144,7 @@ PieChart.propTypes = {

PieChart.defaultProps = {
title: null,
titleInfo: null,
addLabels: false,
exportable: true,
componentName: undefined,
Expand Down
6 changes: 5 additions & 1 deletion src/components/Comparison/Contact311Comparison.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { connect } from 'react-redux';
import { REQUEST_SOURCES, DISTRICT_TYPES } from '@components/common/CONSTANTS';
import ChartExportSelect from '@components/export/ChartExportSelect';
import { PieChart } from '@components/Chart';
import InfoTitle from '@components/common/InfoTitle';
import { transformCounts } from '@utils';

const Contact311Comparison = ({
Expand Down Expand Up @@ -68,7 +69,10 @@ const Contact311Comparison = ({

return (
<div className="contact-311-comparison">
<h1>How People Contact 311</h1>
<InfoTitle
title="How People Contact 311"
infoText="This chart displays the relative frequency of methods people use to contact 311 in each district set."
/>
<ChartExportSelect
componentName="Contact311Comparison"
pdfTemplateName="ComparisonPageNoLegend"
Expand Down
1 change: 1 addition & 0 deletions src/components/Comparison/FrequencyComparison.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const FrequencyComparison = ({
return (
<Chart
title="Frequency"
titleInfo="Frequency displays the number of specific request type(s) over time for each district set."
type="line"
data={chartData}
options={chartOptions}
Expand Down
1 change: 1 addition & 0 deletions src/components/Comparison/TimeToCloseComparison.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -120,6 +120,7 @@ const TimeToCloseComparison = ({
return (
<Chart
title="Time to Close"
titleInfo="This displays the amount of time it typically takes to close the specified 311 request type(s) in each district set."
type="horizontalBoxplot"
data={chartData}
options={chartOptions}
Expand Down
1 change: 1 addition & 0 deletions src/components/Comparison/TotalRequestsComparison.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -98,6 +98,7 @@ const TotalRequestsComparison = ({
return (
<Chart
title="Total Requests"
titleInfo="Total requests displays the aggregate number of requests over time for each district set."
type="bar"
data={chartData}
options={chartOptions}
Expand Down
2 changes: 1 addition & 1 deletion src/components/PinMap/MapboxWordmark.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from 'react';

const MapboxWordmark = () => (
<a href="http://mapbox.com/about/maps" id="mapbox-wordmark" target="_blank" rel="noreferrer">Mapbox</a>
<a href="http://mapbox.com/about/maps" id="mapbox-wordmark" target="_blank" rel="noopener noreferrer">Mapbox</a>
);

export default MapboxWordmark;
1 change: 1 addition & 0 deletions src/components/Visualizations/Contact311.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const Contact311 = ({
return (
<PieChart
title="How People Contact 311"
titleInfo="This chart displays the relative frequency of methods people use to contact 311."
sectors={sectors}
addLabels
componentName="Contact311"
Expand Down
1 change: 1 addition & 0 deletions src/components/Visualizations/Frequency.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ const Frequency = ({
return (
<Chart
title="Frequency"
titleInfo="Frequency displays the number of specific request type(s) over time."
type="line"
data={chartData}
options={chartOptions}
Expand Down
1 change: 1 addition & 0 deletions src/components/Visualizations/TimeToClose.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -115,6 +115,7 @@ const TimeToClose = ({
return (
<Chart
title="Time to Close"
titleInfo="This displays the amount of time it typically takes to close the specified 311 request type(s)."
type="horizontalBoxplot"
data={chartData}
options={chartOptions}
Expand Down
1 change: 1 addition & 0 deletions src/components/Visualizations/TotalRequests.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -103,6 +103,7 @@ const TotalRequests = ({
return (
<Chart
title="Total Requests"
titleInfo="Total requests displays the aggregate number of requests over time, broken down by request type."
type="bar"
data={chartData}
options={chartOptions}
Expand Down
1 change: 1 addition & 0 deletions src/components/Visualizations/TypeOfRequest.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ const TypeOfRequest = ({
return (
<PieChart
title="Type of Request"
titleInfo="This chart displays the relative frequency of each request type."
sectors={sectors}
componentName="TypeOfRequest"
pdfTemplateName="VisPage"
Expand Down
6 changes: 5 additions & 1 deletion src/components/chartExtras/ComparisonCriteria.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import PropTypes from 'proptypes';
import { connect } from 'react-redux';
import { DISTRICT_TYPES, REQUEST_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS';
import CollapsibleList from '@components/common/CollapsibleList';
import InfoTitle from '@components/common/InfoTitle';

const ComparisonCriteria = ({
startDate,
Expand Down Expand Up @@ -78,7 +79,10 @@ const ComparisonCriteria = ({

return (
<div className="chart-extra comparison-criteria">
<h1>Criteria</h1>
<InfoTitle
title="Criteria"
infoText="The legend displays the specific date range, districts and request type(s) selected by the user."
/>
<div className="outline">
<span className="criteria-type">
Date Range
Expand Down
6 changes: 5 additions & 1 deletion src/components/chartExtras/ComparisonLegend.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'proptypes';
import { connect } from 'react-redux';
import { DISTRICT_TYPES, COMPARISON_SETS } from '@components/common/CONSTANTS';
import InfoTitle from '@components/common/InfoTitle';

const ComparisonLegend = ({
comparison,
Expand All @@ -28,7 +29,10 @@ const ComparisonLegend = ({

return (
<div className="chart-extra comparison-legend">
<h1>Legend</h1>
<InfoTitle
title="Legend"
infoText="The legend shows the district sets selected by the user."
/>
<div className="outline">
{ legendItem('set1') }
{ legendItem('set2') }
Expand Down
6 changes: 5 additions & 1 deletion src/components/chartExtras/Criteria.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React from 'react';
import PropTypes from 'proptypes';
import { connect } from 'react-redux';
import CollapsibleList from '@components/common/CollapsibleList';
import InfoTitle from '@components/common/InfoTitle';

const Criteria = ({
startDate,
Expand All @@ -14,7 +15,10 @@ const Criteria = ({

return (
<div className="chart-extra criteria">
<h1>Criteria</h1>
<InfoTitle
title="Criteria"
infoText="The legend displays the specific date range and neighborhood council(s) selected by the user."
/>
<div className="outline">
<div>
<span className="criteria-type">
Expand Down
6 changes: 5 additions & 1 deletion src/components/chartExtras/Legend.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import PropTypes from 'proptypes';
import { connect } from 'react-redux';
import InfoTitle from '@components/common/InfoTitle';
import { REQUEST_TYPES } from '@components/common/CONSTANTS';

const Legend = ({
Expand All @@ -14,7 +15,10 @@ const Legend = ({

return (
<div className="chart-extra legend">
<h1>Legend</h1>
<InfoTitle
title="Legend"
infoText="The legend displays the specific 311 request types selected by the user."
/>
<div className="outline">
{
selectedTypes.length > 0
Expand Down
6 changes: 5 additions & 1 deletion src/components/chartExtras/NumberOfRequests.jsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'proptypes';
import InfoTitle from '@components/common/InfoTitle';

function addCommas(num) {
return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',');
Expand All @@ -10,7 +11,10 @@ const NumberOfRequests = ({
numRequests,
}) => (
<div className="chart-extra number-of-requests">
<h1>Number of Requests</h1>
<InfoTitle
title="Number of Requests"
infoText="This is the total number of requests within the selected filters."
/>
<div className="requests-box-container">
<span className="requests-box">
{ addCommas(numRequests) }
Expand Down
41 changes: 22 additions & 19 deletions src/components/common/HoverOverInfo.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ const HoverOverInfo = ({

return (
<span
className="is-relative"
className="hover-over-info"
onMouseEnter={() => setShowTooltip(true)}
onFocus={() => setShowTooltip(true)}
onMouseLeave={() => setShowTooltip(false)}
Expand All @@ -24,25 +24,28 @@ const HoverOverInfo = ({
<Tooltip position={position}>
<div className="hover-over-tooltip">
{ title && (
<div className="title-row">
<Icon
id="tooltip-icon"
icon="info-circle"
size="small"
style={{ marginRight: '6px' }}
/>
{ title }
</div>
<Icon
id={`tooltip-icon-${title}`}
icon="info-circle"
size="small"
/>
)}
{
text instanceof Array
? (
text.map((line, idx) => (
<div key={idx.toString()}>{ line }</div>
))
)
: text
}
<div className="hover-over-tooltip-text">
{ title && (
<div className="title-row">
{ title }
</div>
)}
{
text instanceof Array
? (
text.map((line, idx) => (
<p key={idx.toString()}>{ line }</p>
))
)
: <p>{ text }</p>
}
</div>
</div>
</Tooltip>
)}
Expand Down
6 changes: 5 additions & 1 deletion src/components/common/InfoTitle.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ const InfoTitle = ({
title,
element,
infoText,
position,
}) => {
const titleEl = React.createElement(
element,
{
style: {
display: 'inline-block',
marginRight: 10,
marginRight: 6,
},
},
title,
Expand All @@ -25,6 +26,7 @@ const InfoTitle = ({
<HoverOverInfo
title={title}
text={infoText}
position={position}
>
<Icon
id={`info-icon-${title}`}
Expand All @@ -45,10 +47,12 @@ InfoTitle.propTypes = {
PropTypes.string,
PropTypes.arrayOf(PropTypes.string),
]),
position: PropTypes.oneOf(['top', 'bottom', 'left', 'right']),
};

InfoTitle.defaultProps = {
title: '',
element: 'h1',
infoText: '',
position: 'right',
};
17 changes: 0 additions & 17 deletions src/components/main/menu/ChartSelector.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,6 @@ import React from 'react';
import { connect } from 'react-redux';
import PropTypes from 'proptypes';

import Icon from '@components/common/Icon';
import HoverOverInfo from '@components/common/HoverOverInfo';
import Checkbox from '@components/common/Checkbox';
import { updateComparisonChart } from '@reducers/comparisonFilters';

Expand All @@ -19,21 +17,6 @@ const ChartSelector = ({

return (
<div className="container">
<div className="is-size-6" style={{ padding: '15px 0' }}>
<strong style={{ paddingRight: '10px' }}>
Chart Selection
</strong>
<HoverOverInfo
title="Chart Selection"
text="This filter allows the user to select a chart for comparison."
>
<Icon
id="chart-selector-info-icon"
icon="info-circle"
size="small"
/>
</HoverOverInfo>
</div>
<div className="chart-selector field">
<div className="control">
<div className="columns is-vcentered">
Expand Down
Loading

0 comments on commit 1495013

Please sign in to comment.