diff --git a/config/webpack/webpack-js.ts b/config/webpack/webpack-js.ts index 6c51a3ce5..164d01dd0 100644 --- a/config/webpack/webpack-js.ts +++ b/config/webpack/webpack-js.ts @@ -29,7 +29,7 @@ export const jsWebpackConfig: Configuration = { 'feedback': `${SOURCE_DIR}/feedback.ts`, 'feedback-capture': `${SOURCE_DIR}/feedback-capture.ts`, 'import': `${SOURCE_DIR}/import.ts`, - 'insights': `${SOURCE_DIR}/insights.ts`, + 'stats': `${SOURCE_DIR}/stats.ts`, 'manage': `${SOURCE_DIR}/manage.ts`, 'mce': `${SOURCE_DIR}/mce.ts`, 'prism': `${SOURCE_DIR}/prism.ts`, diff --git a/src/css/settings.scss b/src/css/settings.scss index 6abc544a3..8ec952aba 100644 --- a/src/css/settings.scss +++ b/src/css/settings.scss @@ -95,7 +95,7 @@ body.js { .wrap[data-active-tab='version-switch'] .version-switch-settings, .wrap[data-active-tab='editing'] .editing-settings, .wrap[data-active-tab='running'] .running-settings, - .wrap[data-active-tab='insights'] .insights-settings, + .wrap[data-active-tab='stats'] .stats-settings, .wrap[data-active-tab='library'] .library-settings, .wrap[data-active-tab='interface'] .interface-settings, .wrap[data-active-tab='advanced'] .advanced-settings { diff --git a/src/css/insights.scss b/src/css/stats.scss similarity index 85% rename from src/css/insights.scss rename to src/css/stats.scss index efd0579d8..b71e169d9 100644 --- a/src/css/insights.scss +++ b/src/css/stats.scss @@ -4,17 +4,17 @@ @use 'common/wp-admin'; @use 'common/page-header'; -#code-snippets-insights-container { +#code-snippets-stats-container { margin-block-start: 0; } -.insights-chart-grid { +.stats-chart-grid { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); } -.insights-chart-card { +.stats-chart-card { min-block-size: 220px; box-sizing: border-box; border: 1px solid var(--cs-color-border-subtle); @@ -23,7 +23,7 @@ color: var(--cs-color-text); padding: 24px; - .insights-chart-card-header { + .stats-chart-card-header { display: flex; align-items: center; justify-content: space-between; @@ -37,7 +37,7 @@ } } -.insights-number-chart { +.stats-number-chart { display: grid; gap: 4px; justify-items: center; @@ -45,23 +45,23 @@ text-align: center; } -.insights-number-chart-value { +.stats-number-chart-value { font-size: 140px; font-variant-numeric: tabular-nums; line-height: 1; } -.insights-number-chart-label { +.stats-number-chart-label { color: var(--cs-color-text-muted); font-size: 13px; } -.insights-chart-view-toggle { +.stats-chart-view-toggle { display: flex; align-items: center; gap: 8px; - .insights-chart-view-toggle-option { + .stats-chart-view-toggle-option { display: flex; align-items: center; justify-content: center; @@ -110,14 +110,14 @@ } } -.insights-bar-chart, -.insights-pie-chart-legend { +.stats-bar-chart, +.stats-pie-chart-legend { padding: 0; margin: 0; list-style: none; } -.insights-tags-cloud { +.stats-tags-cloud { display: flex; flex-wrap: wrap; align-items: baseline; @@ -132,7 +132,7 @@ } } -.insights-chart-entry-link { +.stats-chart-entry-link { color: var(--cs-color-text); text-decoration: none; @@ -148,7 +148,7 @@ } } -.insights-bar-chart { +.stats-bar-chart { display: grid; gap: 10px; @@ -166,25 +166,25 @@ } } -.insights-bar-track { +.stats-bar-track { overflow: hidden; block-size: 10px; border-radius: 999px; background: #e2e5e5; } -.insights-bar-fill { +.stats-bar-fill { block-size: 100%; border-radius: inherit; } -.insights-pie-chart-content { +.stats-pie-chart-content { display: flex; align-items: center; gap: 24px; } -.insights-pie-chart { +.stats-pie-chart { position: relative; flex: 0 0 auto; inline-size: 112px; @@ -201,7 +201,7 @@ } } -.insights-pie-chart-legend { +.stats-pie-chart-legend { display: grid; gap: 12px; inline-size: 100%; @@ -229,11 +229,11 @@ } @media (width <= 782px) { - .insights-chart-grid { + .stats-chart-grid { grid-template-columns: 1fr; } - .insights-bar-chart li { + .stats-bar-chart li { grid-template-columns: minmax(90px, 1fr) minmax(64px, 2fr) auto; } } diff --git a/src/js/components/InsightsMenu/index.ts b/src/js/components/InsightsMenu/index.ts deleted file mode 100644 index 27080c9fd..000000000 --- a/src/js/components/InsightsMenu/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './InsightsMenu' diff --git a/src/js/components/InsightsMenu/InsightsChartViewToggle.tsx b/src/js/components/StatsMenu/StatsChartViewToggle.tsx similarity index 63% rename from src/js/components/InsightsMenu/InsightsChartViewToggle.tsx rename to src/js/components/StatsMenu/StatsChartViewToggle.tsx index 40b96b1ac..05631634f 100644 --- a/src/js/components/InsightsMenu/InsightsChartViewToggle.tsx +++ b/src/js/components/StatsMenu/StatsChartViewToggle.tsx @@ -1,20 +1,20 @@ import { __, sprintf } from '@wordpress/i18n' import classnames from 'classnames' import React from 'react' -import type { InsightsChartView } from '../../types/Insights' +import type { StatsChartView } from '../../types/Stats' -interface ViewToggleButtonProps extends InsightsChartViewToggleProps { +interface ViewToggleButtonProps extends StatsChartViewToggleProps { icon: string label: string currentView: View } -const ViewToggleButton = ( +const ViewToggleButton = ( { icon, title, label, view, setView, currentView }: ViewToggleButtonProps ) => -export interface InsightsChartViewToggleProps { +export interface StatsChartViewToggleProps { title: string view: View setView: (view: View) => void views: readonly View[] } -const VIEW_OPTIONS: Readonly> = { +const VIEW_OPTIONS: Readonly> = { pie: { icon: 'chart-pie', label: __('Chart view', 'code-snippets'), @@ -48,11 +48,11 @@ const VIEW_OPTIONS: Readonly( - { title, view, setView, views }: InsightsChartViewToggleProps +export const StatsChartViewToggle = ( + { title, view, setView, views }: StatsChartViewToggleProps ) =>
diff --git a/src/js/components/InsightsMenu/InsightsCharts.tsx b/src/js/components/StatsMenu/StatsCharts.tsx similarity index 60% rename from src/js/components/InsightsMenu/InsightsCharts.tsx rename to src/js/components/StatsMenu/StatsCharts.tsx index 404a00d1b..3a4b681a8 100644 --- a/src/js/components/InsightsMenu/InsightsCharts.tsx +++ b/src/js/components/StatsMenu/StatsCharts.tsx @@ -1,8 +1,8 @@ import { _n, sprintf } from '@wordpress/i18n' import classnames from 'classnames' import React, { useMemo } from 'react' -import { InsightsChartViewToggle } from './InsightsChartViewToggle' -import type { InsightsChartEntry, InsightsChartKey, InsightsChartViews, InsightsConfigurableChartKey } from '../../types/Insights' +import { StatsChartViewToggle } from './StatsChartViewToggle' +import type { StatsChartEntry, StatsChartKey, StatsChartViews, StatsConfigurableChartKey } from '../../types/Stats' const PERCENTAGE_MAX = 100 @@ -13,7 +13,7 @@ const TAG_CLOUD_MIN_FONT_SIZE = 0.875 const TAG_CLOUD_FONT_SIZE_RANGE = 0.625 const getPieBackground = ( - entries: Readonly>, + entries: Readonly>, colors: Readonly> | undefined, totalCount: number ): string => { @@ -32,12 +32,12 @@ const getPieBackground = ( } interface ChartProps { - entries: Readonly> + entries: Readonly> colors?: Readonly> } -const EntryLabel: React.FC> = ({ label, url }) => - url ? {label} : <>{label} +const EntryLabel: React.FC> = ({ label, url }) => + url ? {label} : <>{label} const BarChart: React.FC = ({ colors, entries }) => { const entryCounts = useMemo(() => @@ -46,13 +46,13 @@ const BarChart: React.FC = ({ colors, entries }) => { [entries]) return ( -
    +
      {Object.entries(entries).map(([key, entry]) =>
    • -