LB-614: UX improvements for user statistics (Cont.) (#913)

* Change margin width for bar graph * Fix digit alignment in the graph
metabrainz · Jun 13, 2020 · b368bec · b368bec
1 parent cdcbc0e
commit b368bec
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 30 deletions.
diff --git a/listenbrainz/webserver/static/js/src/stats/Bar.tsx b/listenbrainz/webserver/static/js/src/stats/Bar.tsx
@@ -4,6 +4,7 @@ import { ResponsiveBar, LabelFormatter } from "@nivo/bar";
 export type BarProps = {
   data: UserEntityData;
   maxValue: number;
+  width?: number;
 };
 
 export type BarState = {
@@ -26,28 +27,6 @@ type Tick = {
 };
 
 export default class Bar extends React.Component<BarProps, BarState> {
-  constructor(props: BarProps) {
-    super(props);
-
-    this.state = {
-      marginLeft: window.innerWidth / 5,
-    };
-  }
-
-  componentDidMount() {
-    window.addEventListener("resize", this.handleResize);
-  }
-
-  componentWillUnmount() {
-    window.removeEventListener("resize", this.handleResize);
-  }
-
-  handleResize = () => {
-    this.setState({
-      marginLeft: window.innerWidth / 5,
-    });
-  };
-
   getEntityLink = (data: UserEntityDatum, entity: string) => {
     if (data.entityMBID) {
       return (
@@ -79,8 +58,9 @@ export default class Bar extends React.Component<BarProps, BarState> {
   };
 
   render() {
-    const { data, maxValue } = this.props;
-    const { marginLeft } = this.state;
+    const { data, maxValue, width } = this.props;
+    const marginLeft = Math.min((width || window.innerWidth) / 2, 350);
+    const tableDigitWidth = data[0]?.idx.toString().length;
 
     const leftAlignedTick = (tick: Tick) => {
       const datum = data[tick.tickIndex];
@@ -98,14 +78,18 @@ export default class Bar extends React.Component<BarProps, BarState> {
                 width: "90%",
                 textAlign: "start",
                 whiteSpace: "nowrap",
+                tableLayout: "fixed",
               }}
             >
               <tbody>
                 <tr style={{ color: "black" }}>
-                  <td style={{ width: 1 }}>{idx}.&nbsp;</td>
+                  <td
+                    style={{ width: `${tableDigitWidth}em`, textAlign: "end" }}
+                  >
+                    {idx}.&nbsp;
+                  </td>
                   <td
                     style={{
-                      maxWidth: 0,
                       textOverflow: "ellipsis",
                       overflow: "hidden",
                     }}
@@ -119,7 +103,6 @@ export default class Bar extends React.Component<BarProps, BarState> {
                     <td
                       style={{
                         fontSize: 12,
-                        maxWidth: 0,
                         textOverflow: "ellipsis",
                         overflow: "hidden",
                       }}

diff --git a/listenbrainz/webserver/static/js/src/stats/UserEntityChart.test.tsx b/listenbrainz/webserver/static/js/src/stats/UserEntityChart.test.tsx
@@ -84,6 +84,19 @@ describe("componentDidMount", () => {
     expect(spy).toHaveBeenCalledWith("popstate", instance.syncStateWithURL);
   });
 
+  it('adds event listener for "release" event', () => {
+    const wrapper = shallow<UserEntityChart>(<UserEntityChart {...props} />);
+    const instance = wrapper.instance();
+
+    const spy = jest.spyOn(window, "addEventListener");
+    spy.mockImplementationOnce(() => {});
+    instance.syncStateWithURL = jest.fn();
+    instance.handleResize = jest.fn();
+    instance.componentDidMount();
+
+    expect(spy).toHaveBeenCalledWith("resize", instance.handleResize);
+  });
+
   it("calls getURLParams once", () => {
     const wrapper = shallow<UserEntityChart>(<UserEntityChart {...props} />);
     const instance = wrapper.instance();
@@ -136,6 +149,18 @@ describe("componentWillUnmount", () => {
 
     expect(spy).toHaveBeenCalledWith("popstate", instance.syncStateWithURL);
   });
+
+  it('removes "resize" event listener', () => {
+    const wrapper = shallow<UserEntityChart>(<UserEntityChart {...props} />);
+    const instance = wrapper.instance();
+
+    const spy = jest.spyOn(window, "removeEventListener");
+    spy.mockImplementationOnce(() => {});
+    instance.handleResize = jest.fn();
+    instance.componentWillUnmount();
+
+    expect(spy).toHaveBeenCalledWith("resize", instance.handleResize);
+  });
 });
 
 describe("changePage", () => {

diff --git a/listenbrainz/webserver/static/js/src/stats/UserEntityChart.tsx b/listenbrainz/webserver/static/js/src/stats/UserEntityChart.tsx
@@ -24,6 +24,7 @@ export type UserEntityChartState = {
   startDate: Date;
   loading: boolean;
   calculated: boolean;
+  graphContainerWidth?: number;
 };
 
 export default class UserEntityChart extends React.Component<
@@ -34,6 +35,8 @@ export default class UserEntityChart extends React.Component<
 
   ROWS_PER_PAGE = 25; // Number of rows to be shown on each page
 
+  graphContainer: React.RefObject<HTMLDivElement>;
+
   constructor(props: UserEntityChartProps) {
     super(props);
 
@@ -53,10 +56,13 @@ export default class UserEntityChart extends React.Component<
       loading: false,
       calculated: true,
     };
+
+    this.graphContainer = React.createRef();
   }
 
   componentDidMount() {
     window.addEventListener("popstate", this.syncStateWithURL);
+    window.addEventListener("resize", this.handleResize);
 
     // Fetch initial data and set URL correspondingly
     const { page, range, entity } = this.getURLParams();
@@ -66,10 +72,12 @@ export default class UserEntityChart extends React.Component<
       `?page=${page}&range=${range}&entity=${entity}`
     );
     this.syncStateWithURL();
+    this.handleResize();
   }
 
   componentWillUnmount() {
     window.removeEventListener("popstate", this.syncStateWithURL);
+    window.removeEventListener("resize", this.handleResize);
   }
 
   changePage = (
@@ -304,6 +312,12 @@ export default class UserEntityChart extends React.Component<
     );
   };
 
+  handleResize = () => {
+    this.setState({
+      graphContainerWidth: this.graphContainer.current?.offsetWidth,
+    });
+  };
+
   render() {
     const {
       data,
@@ -316,6 +330,7 @@ export default class UserEntityChart extends React.Component<
       startDate,
       loading,
       calculated,
+      graphContainerWidth,
     } = this.state;
     const prevPage = currPage - 1;
     const nextPage = currPage + 1;
@@ -440,9 +455,14 @@ export default class UserEntityChart extends React.Component<
             <div
               className="col-md-12 text-center"
               style={{ height: `${(75 / this.ROWS_PER_PAGE) * data.length}em` }}
+              ref={this.graphContainer}
             >
               <Loader isLoading={loading}>
-                <Bar data={data} maxValue={maxListens} />
+                <Bar
+                  data={data}
+                  maxValue={maxListens}
+                  width={graphContainerWidth}
+                />
               </Loader>
             </div>
           )}

diff --git a/listenbrainz/webserver/static/js/src/stats/__snapshots__/UserEntityChart.test.tsx.snap b/listenbrainz/webserver/static/js/src/stats/__snapshots__/UserEntityChart.test.tsx.snap
@@ -549,7 +549,7 @@ exports[`UserEntityChart Page renders correctly for artists 1`] = `
               layout="horizontal"
               margin={
                 Object {
-                  "left": 204.8,
+                  "left": 350,
                 }
               }
               maxValue={70}
@@ -1345,7 +1345,7 @@ exports[`UserEntityChart Page renders correctly for releases 1`] = `
               layout="horizontal"
               margin={
                 Object {
-                  "left": 204.8,
+                  "left": 350,
                 }
               }
               maxValue={26}