diff --git a/src/components/right/RightHeader.tsx b/src/components/right/RightHeader.tsx index ad4e57ebf..aae56c721 100644 --- a/src/components/right/RightHeader.tsx +++ b/src/components/right/RightHeader.tsx @@ -371,7 +371,7 @@ const RightHeader: FC = ({ /> ); case HeaderContent.Statistics: - return

{lang('Statistics')}

; + return

{lang(isChannel ? 'ChannelStats.Title' : 'GroupStats.Title')}

; case HeaderContent.SharedMedia: return

{lang('SharedMedia')}

; case HeaderContent.ManageChannelSubscribers: diff --git a/src/components/right/statistics/StatisticsRecentMessage.scss b/src/components/right/statistics/StatisticsRecentMessage.scss index 543b2d36b..91283680d 100644 --- a/src/components/right/statistics/StatisticsRecentMessage.scss +++ b/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; diff --git a/src/components/right/statistics/StatisticsRecentMessage.tsx b/src/components/right/statistics/StatisticsRecentMessage.tsx index 5a1a863c6..0dd141016 100644 --- a/src/components/right/statistics/StatisticsRecentMessage.tsx +++ b/src/components/right/statistics/StatisticsRecentMessage.tsx @@ -29,7 +29,12 @@ const StatisticsRecentMessage: FC = ({ message }) => { const isRoundVideo = Boolean(getMessageRoundVideo(message)); return ( -

+

{renderSummary(lang, message, mediaBlobUrl || mediaThumbnail, isRoundVideo)} @@ -47,7 +52,7 @@ const StatisticsRecentMessage: FC = ({ message }) => { {message.forwards ? lang('ChannelStats.SharesCount', message.forwards) : 'No shares'}
-

+
); }; diff --git a/src/lib/lovely-chart/Header.js b/src/lib/lovely-chart/Header.js index b2105d8b3..f456dab0f 100644 --- a/src/lib/lovely-chart/Header.js +++ b/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(); } diff --git a/src/lib/lovely-chart/Tooltip.js b/src/lib/lovely-chart/Tooltip.js index 4cd85d8b8..1dcbdeeca 100644 --- a/src/lib/lovely-chart/Tooltip.js +++ b/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() { diff --git a/src/lib/lovely-chart/constants.js b/src/lib/lovely-chart/constants.js index 8a7205f18..f9d98d60b 100644 --- a/src/lib/lovely-chart/constants.js +++ b/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'; diff --git a/src/lib/lovely-chart/drawDatasets.js b/src/lib/lovely-chart/drawDatasets.js index 762bba254..99528aa89 100644 --- a/src/lib/lovely-chart/drawDatasets.js +++ b/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(); }