Skip to content

Commit

Permalink
Merge pull request #1480 from 18F/feature/add_chart_download_icons
Browse files Browse the repository at this point in the history 
[Feature] Add report download links/icons to charts
  • Loading branch information
@levinmr
levinmr authored Jan 14, 2025
2 parents 8c744d2 + 6837f50 commit e1d8cc5
Show file tree
Hide file tree
Showing 39 changed files with 4,293 additions and 2,683 deletions.
2 changes: 1 addition & 1 deletion js/components/chart/ConsolidatedBarChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ function ConsolidatedBarChart({ dataUrl, chartDataKey, maxItems }) {

return (
<figure id={`chart_${chartDataKey}`} ref={ref}>
<div className="data chart__bar-chart margin-top-4"></div>
<div className="data chart__bar-chart margin-top-2"></div>
</figure>
);
}
Expand Down
86 changes: 43 additions & 43 deletions js/components/chart/__tests__/__snapshots__/ConsolidatedBarChart.spec.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key does not
id="chart_browser"
>
<div
class="data chart__bar-chart margin-top-4"
class="data chart__bar-chart margin-top-2"
/>
</figure>
</DocumentFragment>
Expand All @@ -18,10 +18,10 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
id="chart_browser"
>
<div
class="data chart__bar-chart margin-top-4"
class="data chart__bar-chart margin-top-2"
>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -34,12 +34,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
48.5%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 49%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -52,12 +52,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
35.7%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 36%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -70,12 +70,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
8.8%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 9%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -88,12 +88,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.9%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 2%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -106,12 +106,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.9%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 2%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -124,12 +124,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.4%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 1%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -142,12 +142,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 1%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -160,12 +160,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
0.2%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 0%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -178,12 +178,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
0.1%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 0%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -196,7 +196,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
0.4%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 0%;"
/>
</div>
Expand All @@ -211,10 +211,10 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
id="chart_browser"
>
<div
class="data chart__bar-chart margin-top-4"
class="data chart__bar-chart margin-top-2"
>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -227,12 +227,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
48.7%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 49%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -245,12 +245,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
35.8%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 36%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -263,12 +263,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
8.8%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 9%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -281,12 +281,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.9%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 2%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -299,12 +299,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.9%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 2%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -317,12 +317,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1.4%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 1%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -335,12 +335,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
1%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 1%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -353,12 +353,12 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
0.2%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 0%;"
/>
</div>
<div
class="chart__bar-chart__item"
class="chart__bar-chart__item margin-bottom-2"
>
<div
class="chart__bar-chart__item__label dark-grey text--overflow-ellipsis margin-right-8"
Expand All @@ -371,7 +371,7 @@ exports[`ConsolidatedBarChart when data is loaded and the expected key exists in
0.1%
</div>
<div
class="chart__bar-chart__item__bar bg-palette-color-5"
class="chart__bar-chart__item__bar bg-palette-color-5 margin-top-0"
style="width: 0%;"
/>
</div>
Expand All @@ -386,7 +386,7 @@ exports[`ConsolidatedBarChart when data is not loaded renders a component in loa
id="chart_browser"
>
<div
class="data chart__bar-chart margin-top-4"
class="data chart__bar-chart margin-top-2"
/>
</figure>
</DocumentFragment>
Expand All @@ -398,7 +398,7 @@ exports[`ConsolidatedBarChart when data loading has an error renders a component
id="chart_browser"
>
<div
class="data chart__bar-chart margin-top-4"
class="data chart__bar-chart margin-top-2"
/>
</figure>
</DocumentFragment>
Expand Down
4 changes: 2 additions & 2 deletions js/components/dashboard_content/AverageEngagementDuration.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,14 +19,14 @@ import Tooltip from "../tooltip/Tooltip";
* @returns {import('react').ReactElement} The rendered element
*/
function AverageEngagementDuration({ dataHrefBase }) {
const dataURL = `${dataHrefBase}/engagement-duration-30-days.json`;
const jsonDataURL = `${dataHrefBase}/engagement-duration-30-days.json`;
const ref = useRef(null);
const [engagementDurationData, setEngagementDurationData] = useState(null);

useEffect(() => {
const initEngagementDurationsChart = async () => {
if (!engagementDurationData) {
const data = await DataLoader.loadJSON(dataURL);
const data = await DataLoader.loadJSON(jsonDataURL);
await setEngagementDurationData(data);
} else {
const chartBuilder = new ChartBuilder();
Expand Down
17 changes: 14 additions & 3 deletions js/components/dashboard_content/BrowsersChart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,15 @@ import Tooltip from "../tooltip/Tooltip";
* @returns {import('react').ReactElement} The rendered element
*/
function BrowsersChart({ dataHrefBase }) {
const dataURL = `${dataHrefBase}/browsers.json`;
const jsonDataURL = `${dataHrefBase}/browsers.json`;
const csvDataURL = `${dataHrefBase}/browsers.csv`;
const ref = useRef(null);
const [browserData, setBrowserData] = useState(null);

useEffect(() => {
const initBrowsersChart = async () => {
if (!browserData) {
const data = await DataLoader.loadJSON(dataURL);
const data = await DataLoader.loadJSON(jsonDataURL);
await setBrowserData(data);
} else {
const chartBuilder = new ChartBuilder();
Expand All @@ -49,9 +50,19 @@ function BrowsersChart({ dataHrefBase }) {
Web Browsers
</Tooltip>
</a>
<a href={csvDataURL} aria-label="browsers.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>
<figure id="chart_browsers" ref={ref}>
<div className="data chart__bar-chart text--capitalize margin-top-4"></div>
<div className="data chart__bar-chart text--capitalize margin-top-2"></div>
</figure>
</>
);
Expand Down
Loading

0 comments on commit e1d8cc5

Please sign in to comment.