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

Feature/card level time filters #1484

Open
wants to merge 2 commits into
base: develop
Choose a base branch
from
Open

Feature/card level time filters #1484

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
45c6e13
[Feature] Add time filter to devices chart
levinmr Jan 14, 2025
3dab96b
use gray background with cards
levinmr Jan 15, 2025
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
38 changes: 19 additions & 19 deletions js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Chrome
</div>
Expand All @@ -42,7 +42,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Safari
</div>
Expand All @@ -60,7 +60,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Edge
</div>
Expand All @@ -78,7 +78,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Firefox
</div>
Expand All @@ -96,7 +96,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Safari (in-app)
</div>
Expand All @@ -114,7 +114,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Samsung Internet
</div>
Expand All @@ -132,7 +132,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Android Webview
</div>
Expand All @@ -150,7 +150,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Opera
</div>
Expand All @@ -168,7 +168,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Amazon Silk
</div>
Expand All @@ -186,7 +186,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Other
</div>
Expand Down Expand Up @@ -217,7 +217,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Chrome
</div>
Expand All @@ -235,7 +235,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Safari
</div>
Expand All @@ -253,7 +253,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Edge
</div>
Expand All @@ -271,7 +271,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Firefox
</div>
Expand All @@ -289,7 +289,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Safari (in-app)
</div>
Expand All @@ -307,7 +307,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Samsung Internet
</div>
Expand All @@ -325,7 +325,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Android Webview
</div>
Expand All @@ -343,7 +343,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Opera
</div>
Expand All @@ -361,7 +361,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
class="chart__bar-chart__item__label dark-gray text--overflow-ellipsis margin-right-8"
>
Amazon Silk
</div>
Expand Down
2 changes: 1 addition & 1 deletion js/components/dashboard_content/DashboardContent.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -298,7 +298,7 @@
</Tooltip>
</button>
</AccordionHeader>
<AccordionContent id="30-day-demographics">
<AccordionContent id="30-day-demographics" className="bg-light-gray">

Check failure on line 301 in js/components/dashboard_content/DashboardContent.js

View workflow job for this annotation

GitHub Actions / lint-js 

Replace `·id="30-day-demographics"·className="bg-light-gray"` with `⏎··················id="30-day-demographics"⏎··················className="bg-light-gray"⏎················`

Check failure on line 301 in js/components/dashboard_content/DashboardContent.js

View workflow job for this annotation

GitHub Actions / lint-js 

Replace `·id="30-day-demographics"·className="bg-light-gray"` with `⏎··················id="30-day-demographics"⏎··················className="bg-light-gray"⏎················`
<article className="min-height-large section">
<DeviceDemographics dataHrefBase={dataHrefBase} />
</article>
Expand Down
90 changes: 54 additions & 36 deletions js/components/dashboard_content/DeviceDemographics.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
import OperatingSystemsChart from "./OperatingSystemsChart";
import ConsolidatedBarChart from "../chart/ConsolidatedBarChart";
import Tooltip from "../tooltip/Tooltip";
import Card from "../card/Card"

Check failure on line 9 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Insert `;`

Check failure on line 9 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Insert `;`
import CardContent from "../card/CardContent"

Check failure on line 10 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Insert `;`

Check failure on line 10 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Insert `;`

/**
* Contains charts and other data visualizations for the user demographics
Expand All @@ -22,49 +24,65 @@
function DeviceDemographics({ dataHrefBase }) {
return (
<div className="padding-top-1 grid-row">
<div id="devices" className="desktop:grid-col-4 desktop:padding-right-2">
<DevicesChart dataHrefBase={dataHrefBase} />
<div className="chart__title desktop:padding-top-2">
<a href="/definitions#dimension_screen_resolution">
<Tooltip
position="top"
content="The width and height (in pixels) of the screen from which user activity originates."
>
Top Screen Resolutions
</Tooltip>
</a>
<a
href={`${dataHrefBase}/screen-resolution-30-days.csv`}
aria-label="screen-resolution-30-days.csv"
>
<svg
className="usa-icon margin-bottom-neg-05 margin-left-05"
aria-hidden="true"
focusable="false"
role="img"
>
<use xlinkHref="/assets/uswds/img/sprite.svg#file_present"></use>
</svg>
</a>
</div>
<div className="text--capitalize">
<ConsolidatedBarChart
dataUrl={`${dataHrefBase}/screen-resolution-30-days.json`}
chartDataKey={"screen_resolution"}
maxItems={10}
/>
</div>
<div id="devices" className="desktop:grid-col-4">
<Card>
<CardContent className="padding-105">
<DevicesChart dataHrefBase={dataHrefBase} />
</CardContent>
</Card>
<Card>
<CardContent className="padding-105">
<div className="chart__title">
<a href="/definitions#dimension_screen_resolution">
<Tooltip
position="top"
content="The width and height (in pixels) of the screen from which user activity originates."
>
Top Screen Resolutions
</Tooltip>
</a>
<a
href={`${dataHrefBase}/screen-resolution-30-days.csv`}
aria-label="screen-resolution-30-days.csv"
>
<svg
className="usa-icon margin-bottom-neg-05 margin-left-05"
aria-hidden="true"
focusable="false"
role="img"
>
<use xlinkHref="/assets/uswds/img/sprite.svg#file_present"></use>
</svg>
</a>
</div>
<div className="text--capitalize">
<ConsolidatedBarChart
dataUrl={`${dataHrefBase}/screen-resolution-30-days.json`}
chartDataKey={"screen_resolution"}
maxItems={10}
/>
</div>
</CardContent>
</Card>
</div>

<div id="browsers" className="desktop:grid-col-4 desktop:padding-x-2">
<BrowsersChart dataHrefBase={dataHrefBase} />
<div id="browsers" className="desktop:grid-col-4">
<Card>
<CardContent className="padding-105">
<BrowsersChart dataHrefBase={dataHrefBase} />
</CardContent>
</Card>
</div>

<div

Check failure on line 77 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Replace `⏎········id="operating_systems"⏎········className="desktop:grid-col-4"⏎······` with `·id="operating_systems"·className="desktop:grid-col-4"`

Check failure on line 77 in js/components/dashboard_content/DeviceDemographics.js

View workflow job for this annotation

GitHub Actions / lint-js 

Replace `⏎········id="operating_systems"⏎········className="desktop:grid-col-4"⏎······` with `·id="operating_systems"·className="desktop:grid-col-4"`
id="operating_systems"
className="desktop:grid-col-4 desktop:padding-left-2"
className="desktop:grid-col-4"
>
<OperatingSystemsChart dataHrefBase={dataHrefBase} />
<Card>
<CardContent className="padding-105">
<OperatingSystemsChart dataHrefBase={dataHrefBase} />
</CardContent>
</Card>
</div>
</div>
);
Expand Down
Loading
Loading