22

✏️ Editing: StatsDashboard.tsx

import { __ } from '@wordpress/i18n'
import React, { useState } from 'react'
import { useRestAPI } from '../../hooks/useRestAPI'
import { REST_BASES } from '../../utils/restAPI'
import { isLicensed } from '../../utils/screen'
import { SNIPPET_SCOPE_DESCRIPTIONS } from '../../utils/snippets/snippets'
import { buildUrl } from '../../utils/urls'
import { StatsChart, TotalsStatsChart } from './StatsCharts'
import type { StatsChartEntry, StatsChartPreferencesSchema, StatsChartViews, StatsConfigurableChartKey, StatsSummary } from '../../types/Stats'
import type { SnippetCodeScope, SnippetType } from '../../types/Snippet'

export const DEFAULT_STATS_CHART_VIEWS: StatsChartViews = window.CODE_SNIPPETS?.statsChartViews ?? {
	type: 'bar',
	activation: 'pie',
	conditions: 'pie',
	location: 'bar',
	tags: 'bar'
}

export const STATS_TYPE_COLORS: Readonly<Record<SnippetType, string>> = {
	php: '#2271b1',
	html: '#cd4510',
	css: '#9b59b6',
	js: '#f7d67a',
	cond: '#22826f'
}

export const STATS_ACTIVATION_COLORS: Readonly<Record<string, string>> = {
	active: '#118822',
	inactive: '#cd4510'
}

export const STATS_CONDITION_COLORS: Readonly<Record<string, string>> = {
	with: '#22826f',
	without: '#9b59b6'
}

export const STATS_LOCATION_COLORS: Readonly<Record<SnippetCodeScope, string>> = {
	'global': '#ff9800',
	'admin': '#03c7d2',
	'front-end': '#d46f4d',
	'single-use': '#00bcd4',
	'content': '#2271b1',
	'head-content': '#5865f2',
	'body-content': '#3b5998',
	'footer-content': '#9b59b6',
	'admin-css': '#22826f',
	'site-css': '#cd4510',
	'site-head-js': '#f7d67a',
	'site-footer-js': '#2b71a3'
}

interface StaticChartProps {
	summary: StatsSummary
}

interface ConfigurableChartProps<Chart extends StatsConfigurableChartKey> extends StaticChartProps {
	view: StatsChartViews[Chart]
	setView: (view: StatsChartViews[Chart]) => void
}

const SnippetTypeChart: React.FC<ConfigurableChartProps<'type'>> = ({ summary, view, setView }) =>
	<StatsChart
		chart="type"
		title={__('Snippet type', 'code-snippets')}
		entries={Object.fromEntries(
			Object.entries(summary.typeCounts).map(([type, entry]) =>
				[type, { ...entry, url: buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: 'snippets', type }) }])
		)}
		colors={STATS_TYPE_COLORS}
		views={['pie', 'bar']}
		view={view}
		setView={setView}
	/>

const ActivationStatusChart: React.FC<ConfigurableChartProps<'activation'>> = ({ summary, view, setView }) =>
	<StatsChart
		chart="activation"
		title={__('Activation status', 'code-snippets')}
		entries={{
			active: {
				label: __('Active', 'code-snippets'),
				count: summary.active,
				url: buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: 'snippets', status: 'active' })
			},
			inactive: {
				label: __('Inactive', 'code-snippets'),
				count: summary.inactive,
				url: buildUrl(window.CODE_SNIPPETS?.urls.manage, { subpage: 'snippets', status: 'inactive' })
			}
		}}
		colors={STATS_ACTIVATION_COLORS}
		views={['pie', 'bar']}
		view={view}
		setView={setView}
	/>

const ConditionUsageChart: React.FC<ConfigurableChartProps<'conditions'>> = ({ summary, view, setView }) => {
	const licensed = isLicensed()

return (
		<div className={`stats-chart-lock${licensed ? '' : ' is-locked'}`}>
			<StatsChart
				chart="conditions"
				title={__('Condition usage', 'code-snippets')}
				entries={summary.conditionCounts}
				colors={STATS_CONDITION_COLORS}
				views={['pie', 'bar']}
				view={view}
				setView={setView}
				overlay={!licensed && <a className="stats-lock-link button button-primary" href="https://codesnippets.pro/pricing/">
					{__('Go Pro', 'code-snippets')}
				</a>}
			/>
		</div>
	)
}

const LocationChart = ({ summary, view, setView }: ConfigurableChartProps<'location'>) => {
	const entries: Record<string, StatsChartEntry> = Object.fromEntries(
		Object.entries(summary.locationCounts).map(([scope, count]) =>
			[scope, { label: SNIPPET_SCOPE_DESCRIPTIONS[scope as SnippetCodeScope], count }])
	)

return (
		<StatsChart
			chart="location"
			title={__('Location', 'code-snippets')}
			entries={entries}
			colors={STATS_LOCATION_COLORS}
			views={['pie', 'bar']}
			view={view}
			setView={setView}
		/>
	)
}

const TagsChart: React.FC<ConfigurableChartProps<'tags'>> = ({ summary, view, setView }) =>
	<StatsChart
		chart="tags"
		title={__('Tags', 'code-snippets')}
		entries={Object.fromEntries(
			Object.entries(summary.tagCounts).map(([tag, entry]) =>
				[tag, { ...entry, url: buildUrl(window.CODE_SNIPPETS?.urls.manage, { tag }) }])
		)}
		views={['bar', 'cloud']}
		view={view}
		setView={setView}
	/>

export interface StatsDashboardProps {
	summary: StatsSummary
}

export const StatsDashboard: React.FC<StatsDashboardProps> = ({ summary }) => {
	const { api } = useRestAPI()
	const [chartViews, setChartViews] = useState<StatsChartViews>(DEFAULT_STATS_CHART_VIEWS)
	const updateChartView = <Chart extends StatsConfigurableChartKey,>(chart: Chart, view: StatsChartViews[Chart]) => {
		const views: StatsChartViews = { ...chartViews, [chart]: view }

setChartViews(views)

api.post<StatsChartPreferencesSchema, StatsChartPreferencesSchema>(REST_BASES.preferences.stats, { views })
			.catch((error: unknown) => {
				setChartViews(currentViews => currentViews === views ? chartViews : currentViews)
				console.error(error)
			})
	}

return <>
		<div className="snippets-page-header">
			<h1>{__('Stats', 'code-snippets')}</h1>
		</div>

<SnippetTypeChart
				summary={summary}
				view={chartViews.type}
				setView={view => updateChartView('type', view)}
			/>

<ActivationStatusChart
				summary={summary}
				view={chartViews.activation}
				setView={view => updateChartView('activation', view)}
			/>

<ConditionUsageChart
				summary={summary}
				view={chartViews.conditions}
				setView={view => updateChartView('conditions', view)}
			/>

<LocationChart
				summary={summary}
				view={chartViews.location}
				setView={view => updateChartView('location', view)}
			/>

<TagsChart
				summary={summary}
				view={chartViews.tags}
				setView={view => updateChartView('tags', view)}
			/>
		</section>
	</>
}

MR SKB