Skip to content

Commit

Permalink
[Feature] Add report download links/icons to charts
Browse files Browse the repository at this point in the history
  • Loading branch information
@levinmr
levinmr committed Jan 13, 2025
1 parent 8c744d2 commit 7704f99
Show file tree
Hide file tree
Showing 42 changed files with 4,491 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
15 changes: 13 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,15 @@ 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 csvDataURL = `${dataHrefBase}/engagement-duration-30-days.csv`;
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 Expand Up @@ -61,6 +62,16 @@ function AverageEngagementDuration({ dataHrefBase }) {
Average Engagement Time Per Session
</Tooltip>
</a>
<a href={csvDataURL} aria-label="engagement-duration-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_download"></use>
</svg>
</a>
<div ref={ref}>
<div className="data chart__rate padding-top-05"></div>
</div>
Expand Down
Loading

0 comments on commit 7704f99

Please sign in to comment.