|
| 1 | +/* Copyright (c) 2022, UW Medicine Research IT, University of Washington |
| 2 | + * Developed by Nic Dobbins and Cliff Spital, CRIO Sean Mooney |
| 3 | + * This Source Code Form is subject to the terms of the Mozilla Public |
| 4 | + * License, v. 2.0. If a copy of the MPL was not distributed with this |
| 5 | + * file, You can obtain one at http://mozilla.org/MPL/2.0/. |
| 6 | + */ |
| 7 | + |
| 8 | +import React from "react"; |
| 9 | +import { |
| 10 | + Bar, |
| 11 | + BarChart, |
| 12 | + ResponsiveContainer, |
| 13 | + XAxis, |
| 14 | + YAxis, |
| 15 | + LabelList, |
| 16 | + Cell, |
| 17 | +} from "recharts"; |
| 18 | +import { visualizationConfig } from "../../config/visualization"; |
| 19 | +import { PatientCountMap } from "../../models/cohort/DemographicDTO"; |
| 20 | + |
| 21 | +interface Props { |
| 22 | + counts: PatientCountMap; |
| 23 | + delay: number; |
| 24 | + height: number; |
| 25 | + width: number; |
| 26 | +} |
| 27 | + |
| 28 | +interface State { |
| 29 | + showAll: boolean; |
| 30 | + useDelay: boolean; |
| 31 | +} |
| 32 | + |
| 33 | +export class Sex extends React.PureComponent<Props, State> { |
| 34 | + private className = "visualization-sex"; |
| 35 | + private maxWidth = 800; |
| 36 | + private defaultDataLength = 20; |
| 37 | + |
| 38 | + public constructor(props: Props) { |
| 39 | + super(props); |
| 40 | + this.state = { |
| 41 | + showAll: false, |
| 42 | + useDelay: true, |
| 43 | + }; |
| 44 | + } |
| 45 | + |
| 46 | + public render() { |
| 47 | + const config = visualizationConfig.demographics.sex; |
| 48 | + const { height, width, counts, delay } = this.props; |
| 49 | + const { showAll, useDelay } = this.state; |
| 50 | + const c = this.className; |
| 51 | + const del = useDelay ? delay : 0; |
| 52 | + const w = width > this.maxWidth ? this.maxWidth : width; |
| 53 | + |
| 54 | + if (!counts) return <div style={{margin: "24px"}}>No data available</div>; |
| 55 | + let data = Object.entries(counts) |
| 56 | + .map(([key, value]) => ({ key, value })) |
| 57 | + .sort((a, b) => (a.value > b.value ? 0 : 1)); |
| 58 | + const len = data.length; |
| 59 | + |
| 60 | + if (!showAll) { |
| 61 | + data = data.slice(0, this.defaultDataLength); |
| 62 | + } |
| 63 | + |
| 64 | + console.log(" sex data ", data); |
| 65 | + return ( |
| 66 | + <div className={`${c}-column`} style={{ height, width: w }}> |
| 67 | + {/* Show all toggle */} |
| 68 | + {len > this.defaultDataLength && ( |
| 69 | + <div className="visualization-showall-toggle"> |
| 70 | + <span |
| 71 | + className={`visualization-showall false ${ |
| 72 | + showAll ? "" : "selected" |
| 73 | + }`} |
| 74 | + onClick={this.handleShowAllToggleClick.bind(null, false)} |
| 75 | + >{`Show top ${this.defaultDataLength} only`}</span> |
| 76 | + <span |
| 77 | + className={`visualization-showall true ${ |
| 78 | + showAll ? "selected" : "" |
| 79 | + }`} |
| 80 | + onClick={this.handleShowAllToggleClick.bind(null, true)} |
| 81 | + >{`Show all ${len}`}</span> |
| 82 | + </div> |
| 83 | + )} |
| 84 | + |
| 85 | + {/* Chart */} |
| 86 | + <div style={{ height }}> |
| 87 | + <ResponsiveContainer> |
| 88 | + <BarChart |
| 89 | + data={data} |
| 90 | + margin={{ top: 30, right: 30, left: 10, bottom: 5 }} |
| 91 | + > |
| 92 | + <XAxis dataKey="key" /> |
| 93 | + <YAxis /> |
| 94 | + <Bar |
| 95 | + animationBegin={del} |
| 96 | + barSize={config.barSize} |
| 97 | + dataKey="value" |
| 98 | + isAnimationActive={true} |
| 99 | + > |
| 100 | + {data.map((d, i) => ( |
| 101 | + <Cell key={d.key} fill={this.color(i, config.colors)} /> |
| 102 | + ))} |
| 103 | + <LabelList |
| 104 | + dataKey="value" |
| 105 | + formatter={this.formatNumber} |
| 106 | + position="top" |
| 107 | + /> |
| 108 | + </Bar> |
| 109 | + </BarChart> |
| 110 | + </ResponsiveContainer> |
| 111 | + </div> |
| 112 | + </div> |
| 113 | + ); |
| 114 | + } |
| 115 | + |
| 116 | + private formatNumber = (val: any) => val.toLocaleString(); |
| 117 | + |
| 118 | + private color = (i: number, colors: string[]): string => { |
| 119 | + const last = colors.length - 1; |
| 120 | + if (i <= last) { |
| 121 | + return colors[i]; |
| 122 | + } |
| 123 | + return colors[i - Math.floor(i / last) * last - 1]; |
| 124 | + }; |
| 125 | + |
| 126 | + private handleShowAllToggleClick = (showAll: boolean) => { |
| 127 | + this.setState({ showAll, useDelay: false }); |
| 128 | + }; |
| 129 | +} |
0 commit comments