From 00acfdcfc77c3b5d86a4786fec75e41a59a681fb Mon Sep 17 00:00:00 2001
From: dat <suppermancool@gmail.com>
Date: Wed, 15 Aug 2018 20:26:33 +0700
Subject: [PATCH] fix issue #1191 rating distribution graph

fix issue #1191
Profile - The rating distribution graph is not completely shown on mobile
---
 .../Stats/DistributionGraph/index.jsx         | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
index f2bd43eed9..353ff86ff9 100644
--- a/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
+++ b/src/shared/components/ProfilePage/Stats/DistributionGraph/index.jsx
@@ -37,6 +37,7 @@ export default class DistributionGraph extends React.Component {
   constructor(props) {
     super(props);
     this.state = {};
+    this.mobileWidth = 0;
     this.graphRef = React.createRef();
   }
 
@@ -45,7 +46,9 @@ export default class DistributionGraph extends React.Component {
     $scope.desktop = window.innerWidth >= 900;
     this.draw();
     this.resizeHandle = () => {
-      if (window.innerWidth < 900 && $scope.desktop) {
+      if (window.innerWidth < 900
+        && ($scope.desktop
+        || (this.mobileWidth !== DistributionGraph.getMobileWidthGrapthMeasurements()))) {
         $scope.desktop = false;
         this.draw();
       } else if (window.innerWidth >= 900 && !$scope.desktop) {
@@ -67,6 +70,13 @@ export default class DistributionGraph extends React.Component {
     window.removeEventListener('resize', this.resizeHandle);
   }
 
+  static getMobileWidthGrapthMeasurements() {
+    if (window.innerWidth < 400) {
+      return 250;
+    }
+    return 370;
+  }
+
   draw() {
     const $scope = this;
     const { distribution: wrapper, rating } = this.props;
@@ -87,7 +97,7 @@ export default class DistributionGraph extends React.Component {
     };
 
     const mobileMeasurements = {
-      w: 370,
+      w: 0,
       h: 200,
       padding: {
         top: 50,
@@ -98,7 +108,12 @@ export default class DistributionGraph extends React.Component {
     };
 
     d3.select($scope.graphRef.current).select('svg').remove();
-    const { w, h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    let { w } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    const { h, padding } = $scope.desktop ? desktopMeasurements : mobileMeasurements;
+    if (!$scope.desktop) {
+      w = DistributionGraph.getMobileWidthGrapthMeasurements();
+      this.mobileWidth = w;
+    }
     const totalW = w + padding.left + padding.right;
     const totalH = h + padding.top + padding.bottom;