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

Add wards + ability to click to see routes in ward #54

Closed
wants to merge 9 commits into from
Prev Previous commit
Next Next commit
refactor: Moved legend html into its own component
smacmullan committed Feb 5, 2023
commit 3f69eda14fc97a8c403f699d3e1fa369df0330ee
27 changes: 2 additions & 25 deletions src/components/Filter.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import RankingLegend from "./RankingLegend";

const Filter = ({
currentFilters,
@@ -93,31 +94,7 @@ const Filter = ({
</button>
</div>
{currentFilters.color && (
<div className="filter-key">
<h4>Map Key by Percentile</h4>
<ul>
<li>
<span className="percentile-text">0-19%</span>
<span className="color-key one"></span>
</li>
<li>
<span className="percentile-text">20-39%</span>
<span className="color-key two"></span>
</li>
<li>
<span className="percentile-text">40-59%</span>
<span className="color-key three"></span>
</li>
<li>
<span className="percentile-text">60-79%</span>
<span className="color-key four"></span>
</li>
<li>
<span className="percentile-text">80-99%</span>
<span className="color-key five"></span>
</li>
</ul>
</div>
<RankingLegend/>
)}
</>
);
34 changes: 34 additions & 0 deletions src/components/RankingLegend.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import React from "react";

const RankingLegend = () => {
return (
<div className="filter-key">
<h4>Map Key by Percentile</h4>
<ul>
<li>
<span className="percentile-text">0-19%</span>
<span className="color-key one"></span>
</li>
<li>
<span className="percentile-text">20-39%</span>
<span className="color-key two"></span>
</li>
<li>
<span className="percentile-text">40-59%</span>
<span className="color-key three"></span>
</li>
<li>
<span className="percentile-text">60-79%</span>
<span className="color-key four"></span>
</li>
<li>
<span className="percentile-text">80-99%</span>
<span className="color-key five"></span>
</li>
</ul>
</div>
);
};


export default RankingLegend;
27 changes: 2 additions & 25 deletions src/components/WardFilter.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import RankingLegend from "./RankingLegend";

const Filter = ({
currentFilters,
@@ -44,31 +45,7 @@ const Filter = ({
</button>
</div>
{currentFilters.color && (
<div className="filter-key">
<h4>Map Key by Percentile</h4>
<ul>
<li>
<span className="percentile-text">0-19%</span>
<span className="color-key one"></span>
</li>
<li>
<span className="percentile-text">20-39%</span>
<span className="color-key two"></span>
</li>
<li>
<span className="percentile-text">40-59%</span>
<span className="color-key three"></span>
</li>
<li>
<span className="percentile-text">60-79%</span>
<span className="color-key four"></span>
</li>
<li>
<span className="percentile-text">80-99%</span>
<span className="color-key five"></span>
</li>
</ul>
</div>
<RankingLegend/>
)}
</>
);