Skip to content

Commit

Permalink
Merge branch 'develop' into enhance/#8138-audience-widget-area.
Browse files Browse the repository at this point in the history
  • Loading branch information
@hussain-t
hussain-t committed May 23, 2024
2 parents dd9c6d7 + 6ca0730 commit 5d52fd2
Show file tree
Hide file tree
Showing 24 changed files with 473 additions and 43 deletions.
47 changes: 40 additions & 7 deletions ...tics-4/components/audience-segmentation/dashboard/AudienceTile/AudienceTilePagesMetric.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,34 +17,46 @@
*/

/**
* WordPress dependencies
* External dependencies
*/
import { useSelect } from '@wordpress/data';
import PropTypes from 'prop-types';

/**
* External dependencies
* WordPress dependencies
*/
import PropTypes from 'prop-types';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import Link from '../../../../../../components/Link';
import useViewOnly from '../../../../../../hooks/useViewOnly';
import Data from 'googlesitekit-data';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
useBreakpoint,
} from '../../../../../../hooks/useBreakpoint';
import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
import {
DATE_RANGE_OFFSET,
MODULES_ANALYTICS_4,
} from '../../../../datastore/constants';
import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
import AudienceTileNoData from './AudienceTileNoData';
import Link from '../../../../../../components/Link';
import PartialDataBadge from '../PartialDataBadge';
import PartialDataNotice from '../PartialDataNotice';
import { numFmt } from '../../../../../../util';
import useViewOnly from '../../../../../../hooks/useViewOnly';

const { useSelect } = Data;

export default function AudienceTilePagesMetric( {
TileIcon,
title,
topContent,
topContentTitles,
isTopContentPartialData,
} ) {
const breakpoint = useBreakpoint();
const viewOnlyDashboard = useViewOnly();

const dates = useSelect( ( select ) =>
Expand Down Expand Up @@ -94,6 +106,10 @@ export default function AudienceTilePagesMetric( {
);
}

const isMobileBreakpoint = [ BREAKPOINT_SMALL, BREAKPOINT_TABLET ].includes(
breakpoint
);

return (
<div className="googlesitekit-audience-segmentation-tile-metric googlesitekit-audience-segmentation-tile-metric--top-content">
<div className="googlesitekit-audience-segmentation-tile-metric__icon">
Expand All @@ -102,6 +118,14 @@ export default function AudienceTilePagesMetric( {
<div className="googlesitekit-audience-segmentation-tile-metric__container">
<div className="googlesitekit-audience-segmentation-tile-metric__title">
{ title }
{ ! isMobileBreakpoint && isTopContentPartialData && (
<PartialDataBadge
tooltipTitle={ __(
'Still collecting full data for this timeframe, partial data is displayed for this metric',
'google-site-kit'
) }
/>
) }
</div>
<div className="googlesitekit-audience-segmentation-tile-metric__content">
{ ! hasDimensionValues && <AudienceTileNoData /> }
Expand All @@ -122,6 +146,14 @@ export default function AudienceTilePagesMetric( {
</div>
);
} ) }
{ isMobileBreakpoint && isTopContentPartialData && (
<PartialDataNotice
content={ __(
'Still collecting full data for this timeframe, partial data is displayed for this metric',
'google-site-kit'
) }
/>
) }
</div>
</div>
</div>
Expand All @@ -133,4 +165,5 @@ AudienceTilePagesMetric.propTypes = {
title: PropTypes.string.isRequired,
topContent: PropTypes.object,
topContentTitles: PropTypes.object,
isTopContentPartialData: PropTypes.bool,
};
114 changes: 87 additions & 27 deletions ...s/js/modules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,34 +19,40 @@
/**
* External dependencies
*/
import classnames from 'classnames';
import PropTypes from 'prop-types';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import InfoTooltip from '../../../../../../components/InfoTooltip';
import ChangeBadge from '../../../../../../components/ChangeBadge';
import Data from 'googlesitekit-data';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
useBreakpoint,
} from '../../../../../../hooks/useBreakpoint';
import { MODULES_ANALYTICS_4 } from '../../../../datastore/constants';
import AudienceMetricIconVisitors from '../../../../../../../svg/icons/audience-metric-icon-visitors.svg';
import AudienceMetricIconVisitsPerVisitor from '../../../../../../../svg/icons/audience-metric-icon-visits-per-visitor.svg';
import AudienceMetricIconPagesPerVisit from '../../../../../../../svg/icons/audience-metric-icon-pages-per-visit.svg';
import AudienceMetricIconPageviews from '../../../../../../../svg/icons/audience-metric-icon-pageviews.svg';
import AudienceMetricIconCities from '../../../../../../../svg/icons/audience-metric-icon-cities.svg';
import AudienceMetricIconTopContent from '../../../../../../../svg/icons/audience-metric-icon-top-content.svg';
import {
BREAKPOINT_SMALL,
BREAKPOINT_TABLET,
useBreakpoint,
} from '../../../../../../hooks/useBreakpoint';
import AudienceTileMetric from './AudienceTileMetric';
import AudienceTileCitiesMetric from './AudienceTileCitiesMetric';
import AudienceTilePagesMetric from './AudienceTilePagesMetric';
import { numFmt } from '../../../../../../util';

/**
* WordPress dependencies
*/
import { __, sprintf } from '@wordpress/i18n';
import PreviewBlock from '../../../../../../components/PreviewBlock';
import ChangeBadge from '../../../../../../components/ChangeBadge';
import InfoTooltip from '../../../../../../components/InfoTooltip';
import PartialDataBadge from '../PartialDataBadge';
import PartialDataNotice from '../PartialDataNotice';
import { numFmt } from '../../../../../../util';
const { useSelect } = Data;

// TODO: as part of #8484 the report props should be updated to expect
// the full report rows for the current tile to reduce data manipulation
Expand All @@ -64,32 +70,84 @@ export default function AudienceTile( {
topContent,
topContentTitles,
Widget,
audienceResourceName,
} ) {
const breakpoint = useBreakpoint();

const isPropertyPartialData = useSelect( ( select ) => {
const propertyID = select( MODULES_ANALYTICS_4 ).getPropertyID();

return (
propertyID &&
select( MODULES_ANALYTICS_4 ).isPropertyPartialData( propertyID )
);
} );
const isAudiencePartialData = useSelect(
( select ) =>
! isPropertyPartialData &&
audienceResourceName &&
select( MODULES_ANALYTICS_4 ).isAudiencePartialData(
audienceResourceName
)
);
const isTopContentPartialData = useSelect(
( select ) =>
! isAudiencePartialData &&
select( MODULES_ANALYTICS_4 ).isCustomDimensionPartialData(
'googlesitekit_post_type'
)
);

const isMobileBreakpoint = [ BREAKPOINT_SMALL, BREAKPOINT_TABLET ].includes(
breakpoint
);

// TODO: Loading states will be implemented as part of https://github.com/google/site-kit-wp/issues/8145.
if ( ! loaded ) {
return <PreviewBlock width="100%" height="500px" />;
}

return (
<Widget noPadding>
<div className="googlesitekit-audience-segmentation-tile">
{ breakpoint !== BREAKPOINT_TABLET &&
breakpoint !== BREAKPOINT_SMALL && (
<div className="googlesitekit-audience-segmentation-tile__header">
<div className="googlesitekit-audience-segmentation-tile__header-title">
{ title }
{ infoTooltip && (
<InfoTooltip
title={ infoTooltip }
tooltipClassName="googlesitekit-info-tooltip__content--audience"
/>
) }
</div>
<div
className={ classnames(
'googlesitekit-audience-segmentation-tile',
{
'googlesitekit-audience-segmentation-tile--partial-data':
isAudiencePartialData,
}
) }
>
{ ! isMobileBreakpoint && (
<div className="googlesitekit-audience-segmentation-tile__header">
<div className="googlesitekit-audience-segmentation-tile__header-title">
{ title }
{ infoTooltip && (
<InfoTooltip
title={ infoTooltip }
tooltipClassName="googlesitekit-info-tooltip__content--audience"
/>
) }
</div>
) }
{ isAudiencePartialData && (
<PartialDataBadge
tooltipTitle={ __(
'Still collecting full data for this timeframe, partial data is displayed for this group',
'google-site-kit'
) }
/>
) }
</div>
) }
<div className="googlesitekit-audience-segmentation-tile__metrics">
{ isMobileBreakpoint && isAudiencePartialData && (
<PartialDataNotice
content={ __(
'Still collecting full data for this timeframe, partial data is displayed for this group',
'google-site-kit'
) }
/>
) }
<AudienceTileMetric
TileIcon={ AudienceMetricIconVisitors }
title={ __( 'Visitors', 'google-site-kit' ) }
Expand Down Expand Up @@ -162,6 +220,7 @@ export default function AudienceTile( {
) }
topContentTitles={ topContentTitles }
topContent={ topContent }
isTopContentPartialData={ isTopContentPartialData }
/>
</div>
</div>
Expand All @@ -182,4 +241,5 @@ AudienceTile.propTypes = {
topContent: PropTypes.object,
topContentTitles: PropTypes.object,
Widget: PropTypes.elementType.isRequired,
audienceResourceName: PropTypes.string.isRequired,
};
78 changes: 77 additions & 1 deletion ...ules/analytics-4/components/audience-segmentation/dashboard/AudienceTile/index.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,18 @@
*/
import WithRegistrySetup from '../../../../../../../../tests/js/WithRegistrySetup';
import { Provider as ViewContextProvider } from '../../../../../../components/Root/ViewContextContext';
import { CORE_USER } from '../../../../../../googlesitekit/datastore/user/constants';
import {
DATE_RANGE_OFFSET,
MODULES_ANALYTICS_4,
} from '../../../../datastore/constants';
import {
VIEW_CONTEXT_MAIN_DASHBOARD,
VIEW_CONTEXT_MAIN_DASHBOARD_VIEW_ONLY,
} from '../../../../../../googlesitekit/constants';
import { withWidgetComponentProps } from '../../../../../../googlesitekit/widgets/util';
import AudienceTile from '.';
import { getPreviousDate } from '../../../../../../util';
import { withWidgetComponentProps } from '../../../../../../googlesitekit/widgets/util';

const WidgetWithComponentProps =
withWidgetComponentProps( 'audienceTile' )( AudienceTile );
Expand Down Expand Up @@ -128,6 +134,8 @@ const readyProps = {
},
};

const audienceResourceName = 'properties/12345/audiences/12345';

export const Ready = Template.bind( {} );
Ready.storyName = 'Ready';
Ready.args = readyProps;
Expand Down Expand Up @@ -200,6 +208,74 @@ NoData.scenario = {
label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceTile/NoData',
};

export const AudiencePartialData = Template.bind( {} );
AudiencePartialData.storyName = 'Audience partial data';
AudiencePartialData.args = {
...readyProps,
infoTooltip: 'This is a tooltip',
audienceResourceName,
setupRegistry: ( registry ) => {
registry
.dispatch( MODULES_ANALYTICS_4 )
.receiveIsGatheringData( false );

const { startDate } = registry.select( CORE_USER ).getDateRangeDates( {
offsetDays: DATE_RANGE_OFFSET,
} );

const dataAvailabilityDate = Number(
getPreviousDate( startDate, -1 ).replace( /-/g, '' )
);

registry
.dispatch( MODULES_ANALYTICS_4 )
.receiveResourceDataAvailabilityDates( {
audience: {
[ audienceResourceName ]: dataAvailabilityDate,
},
customDimension: {},
property: {},
} );
},
};
AudiencePartialData.scenario = {
label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceTile/AudiencePartialData',
};

export const TopContentPartialData = Template.bind( {} );
TopContentPartialData.storyName = 'Top content partial data';
TopContentPartialData.args = {
...readyProps,
infoTooltip: 'This is a tooltip',
audienceResourceName,
setupRegistry: ( registry ) => {
registry
.dispatch( MODULES_ANALYTICS_4 )
.receiveIsGatheringData( false );

const { startDate } = registry.select( CORE_USER ).getDateRangeDates( {
offsetDays: DATE_RANGE_OFFSET,
} );

const dataAvailabilityDate = Number(
getPreviousDate( startDate, -1 ).replace( /-/g, '' )
);

registry
.dispatch( MODULES_ANALYTICS_4 )
.receiveResourceDataAvailabilityDates( {
audience: {},
customDimension: {
googlesitekit_post_type: dataAvailabilityDate,
},
property: {},
} );
},
};
TopContentPartialData.scenario = {
label: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceTile/TopContentPartialData',
};

export default {
title: 'Modules/Analytics4/Components/AudienceSegmentation/Dashboard/AudienceTile',
};
Loading

0 comments on commit 5d52fd2

Please sign in to comment.