Statistics: Various fixes (#1814)

src/components/right/RightHeader.tsx

@@ -371,7 +371,7 @@ const RightHeader: FC<OwnProps & StateProps> = ({
           />
         );
       case HeaderContent.Statistics:
-        return <h3>{lang('Statistics')}</h3>;
+        return <h3>{lang(isChannel ? 'ChannelStats.Title' : 'GroupStats.Title')}</h3>;
       case HeaderContent.SharedMedia:
         return <h3>{lang('SharedMedia')}</h3>;
       case HeaderContent.ManageChannelSubscribers:

src/components/right/statistics/StatisticsRecentMessage.scss

@@ -1,6 +1,10 @@
 .StatisticsRecentMessage {
   position: relative;
-  padding-left: 3rem;
+  margin-bottom: 1rem;
+
+  &--with-image {
+    padding-left: 3rem;
+  }
 
   &__summary {
     flex: 1;

src/components/right/statistics/StatisticsRecentMessage.tsx

@@ -29,7 +29,12 @@ const StatisticsRecentMessage: FC<OwnProps> = ({ message }) => {
   const isRoundVideo = Boolean(getMessageRoundVideo(message));
 
   return (
-    <p className="StatisticsRecentMessage">
+    <div
+      className={buildClassName(
+        'StatisticsRecentMessage',
+        Boolean(mediaBlobUrl || mediaThumbnail) && 'StatisticsRecentMessage--with-image',
+      )}
+    >
       <div className="StatisticsRecentMessage__title">
         <div className="StatisticsRecentMessage__summary">
           {renderSummary(lang, message, mediaBlobUrl || mediaThumbnail, isRoundVideo)}
@@ -47,7 +52,7 @@ const StatisticsRecentMessage: FC<OwnProps> = ({ message }) => {
           {message.forwards ? lang('ChannelStats.SharesCount', message.forwards) : 'No shares'}
         </div>
       </div>
-    </p>
+    </div>
   );
 };
 

src/lib/lovely-chart/Header.js

@@ -52,6 +52,7 @@ export function createHeader(container, title, zoomOutLabel = 'Zoom out', zoomOu
 
   function _onZoomOut() {
     _titleElement = toggleText(_zoomOutElement, title, 'lovely-chart--header-title', true);
+    _titleElement.classList.remove('lovely-chart--transition');
 
     zoomOutCallback();
   }

src/lib/lovely-chart/Tooltip.js

@@ -120,17 +120,17 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
       return;
     }
 
-    const oldLabelIndex = _clickedOnLabel;
-
-    _clickedOnLabel = null;
-    _onMouseMove(e, true);
-
-    const newLabelIndex = _getLabelIndex();
-    if (newLabelIndex !== oldLabelIndex) {
-      _clickedOnLabel = newLabelIndex;
-    }
-
     if (data.isZoomable) {
+      const oldLabelIndex = _clickedOnLabel;
+
+      _clickedOnLabel = null;
+      _onMouseMove(e, true);
+
+      const newLabelIndex = _getLabelIndex();
+      if (newLabelIndex !== oldLabelIndex) {
+        _clickedOnLabel = newLabelIndex;
+      }
+
       onZoom(newLabelIndex);
     }
   }
@@ -266,9 +266,9 @@ export function createTooltip(container, data, plotSize, colors, onZoom, onFocus
 
     const shouldPlaceRight = data.isPie ? angle > Math.PI / 2 : labelIndex < meanLabel;
 
-    return shouldPlaceRight
-        ? _offsetX + BALLOON_OFFSET
-        : _offsetX - (_balloon.offsetWidth + BALLOON_OFFSET);
+    const leftOffset = shouldPlaceRight ? _offsetX + BALLOON_OFFSET : _offsetX - (_balloon.offsetWidth + BALLOON_OFFSET);
+
+    return Math.min(Math.max(0, leftOffset), container.offsetWidth - _balloon.offsetWidth);
   }
 
   function _getBalloonTopOffset() {

src/lib/lovely-chart/constants.js

@@ -12,6 +12,8 @@ export const PLOT_PIE_RADIUS_FACTOR = 0.9 / 2;
 export const PLOT_PIE_SHIFT = 10;
 export const PLOT_BARS_WIDTH_SHIFT = 0.5;
 
+export const PIE_MINIMUM_VISIBLE_PERCENT = 0.02;
+
 export const BALLOON_OFFSET = 20;
 
 export const AXES_FONT = '300 10px Helvetica, Arial, sans-serif';

src/lib/lovely-chart/drawDatasets.js

@@ -1,7 +1,7 @@
 import { getCssColor } from './skin';
 import { mergeArrays } from './utils';
 import { getPieRadius, getPieTextShift, getPieTextSize } from './formulas';
-import { PLOT_BARS_WIDTH_SHIFT, PLOT_PIE_SHIFT } from './constants';
+import { PLOT_BARS_WIDTH_SHIFT, PLOT_PIE_SHIFT, PIE_MINIMUM_VISIBLE_PERCENT } from './constants';
 import { simplify } from './simplify';
 import { toPixels } from './Projection';
 
@@ -243,14 +243,16 @@ function drawDatasetPie(context, points, projection, options) {
   context.lineTo(x + shiftX, y + shiftY);
   context.fill();
 
-  context.font = `700 ${getPieTextSize(percent, radius)}px Helvetica, Arial, sans-serif`;
-  context.textAlign = 'center';
-  context.textBaseline = 'middle';
-  context.fillStyle = 'white';
-  const textShift = getPieTextShift(percent, radius);
-  context.fillText(
-    `${Math.round(percent * 100)}%`, x + directionX * textShift + shiftX, y + directionY * textShift + shiftY,
-  );
+  if (percent >= PIE_MINIMUM_VISIBLE_PERCENT) {
+    context.font = `700 ${getPieTextSize(percent, radius)}px Helvetica, Arial, sans-serif`;
+    context.textAlign = 'center';
+    context.textBaseline = 'middle';
+    context.fillStyle = 'white';
+    const textShift = getPieTextShift(percent, radius);
+    context.fillText(
+      `${Math.round(percent * 100)}%`, x + directionX * textShift + shiftX, y + directionY * textShift + shiftY,
+    );
+  }
 
   context.restore();
 }