| 1 |
import { __ } from "@wordpress/i18n"; |
| 2 |
import React from "react"; |
| 3 |
|
| 4 |
import { Donut, HBar, Sparkline } from "../../analytics/components/common/charts"; |
| 5 |
import { I } from "../../analytics/components/common/icons"; |
| 6 |
import { Badge, Card } from "../../analytics/components/common/ui"; |
| 7 |
import { FauxBtn } from "./primitives"; |
| 8 |
|
| 9 |
/** |
| 10 |
* Inert mock of Pro's Content Health Score screen |
| 11 |
* (betterdocs-pro/react-src/admin/content-intelligence/views/HealthView.js): |
| 12 |
* the composite score donut with its month-over-month trend, the five scored |
| 13 |
* components with the weakest one called out, the distribution across every |
| 14 |
* published doc, and the articles dragging the average down. |
| 15 |
*/ |
| 16 |
|
| 17 |
const SCORE = 78; |
| 18 |
const GRADE = "B"; |
| 19 |
const COLOR = "#16C098"; |
| 20 |
|
| 21 |
// The five components of the composite score (Pro's `COMPONENTS`), with a |
| 22 |
// plausible reading for each. Freshness is deliberately the weak one — that is |
| 23 |
// what makes the "weakest area" callout below say something. |
| 24 |
const COMPONENTS = [ |
| 25 |
{ name: __( "Engagement", "betterdocs" ), value: 82 }, |
| 26 |
{ name: __( "Helpfulness", "betterdocs" ), value: 88 }, |
| 27 |
{ name: __( "Freshness", "betterdocs" ), value: 61 }, |
| 28 |
{ name: __( "Findability", "betterdocs" ), value: 74 }, |
| 29 |
{ name: __( "Accuracy", "betterdocs" ), value: 79 } |
| 30 |
]; |
| 31 |
|
| 32 |
const DISTRIBUTION = [ |
| 33 |
{ name: "81-100", value: 34, color: "#16C098" }, |
| 34 |
{ name: "61-80", value: 41, color: "#16C098" }, |
| 35 |
{ name: "41-60", value: 18, color: "#f59e0b" }, |
| 36 |
{ name: "21-40", value: 7, color: "#ef4444" }, |
| 37 |
{ name: "0-20", value: 3, color: "#ef4444" } |
| 38 |
]; |
| 39 |
|
| 40 |
const UNDER = [ |
| 41 |
{ t: "Legacy Shortcode Reference", cat: "Reference", grade: "F", score: 31, weak: __( "Accuracy", "betterdocs" ) }, |
| 42 |
{ t: "Installing on WordPress Multisite", cat: "Getting Started", grade: "D", score: 44, weak: __( "Freshness", "betterdocs" ) }, |
| 43 |
{ t: "Configuring Live Search Filters", cat: "Search", grade: "D", score: 48, weak: __( "Findability", "betterdocs" ) }, |
| 44 |
{ t: "Customizing the KB Layout", cat: "Design", grade: "C", score: 57, weak: __( "Engagement", "betterdocs" ) } |
| 45 |
]; |
| 46 |
|
| 47 |
const GRADE_COLOR = { A: "#16C098", B: "#16C098", C: "#f59e0b", D: "#f97316", F: "#ef4444" }; |
| 48 |
|
| 49 |
const barColor = ( v ) => ( v >= 75 ? "#16C098" : v >= 60 ? "#f59e0b" : "#ef4444" ); |
| 50 |
|
| 51 |
export default function HealthMock() { |
| 52 |
return ( |
| 53 |
<div className="bda-stack-sm"> |
| 54 |
<div className="bda-grid12"> |
| 55 |
<div className="bda-col6"> |
| 56 |
<Card padded title={ __( "Content Health Score", "betterdocs" ) }> |
| 57 |
<div className="bd-cit-health-top"> |
| 58 |
<Donut |
| 59 |
size={ 130 } |
| 60 |
thickness={ 14 } |
| 61 |
centerValue={ SCORE } |
| 62 |
centerLabel={ `${ __( "Grade", "betterdocs" ) } ${ GRADE }` } |
| 63 |
segments={ [ |
| 64 |
{ value: SCORE, color: COLOR }, |
| 65 |
{ value: 100 - SCORE, color: "transparent" } |
| 66 |
] } |
| 67 |
/> |
| 68 |
<div> |
| 69 |
<div className="bd-cit-health-grade"> |
| 70 |
<span>{ GRADE }</span> |
| 71 |
<span className="bda-trend up"><I.ArrowUp size={ 11 } />{ __( "+4 pts", "betterdocs" ) }</span> |
| 72 |
</div> |
| 73 |
<div className="bd-cit-row-meta">{ __( "vs last month · site-wide", "betterdocs" ) }</div> |
| 74 |
<div style={ { marginTop: 12 } }> |
| 75 |
<Sparkline points={ [ 68, 70, 69, 72, 74, 73, 76, 78 ] } color={ COLOR } width={ 180 } height={ 36 } /> |
| 76 |
</div> |
| 77 |
</div> |
| 78 |
</div> |
| 79 |
</Card> |
| 80 |
</div> |
| 81 |
|
| 82 |
<div className="bda-col6"> |
| 83 |
<Card padded title={ __( "Score components", "betterdocs" ) }> |
| 84 |
<HBar |
| 85 |
max={ 100 } |
| 86 |
items={ COMPONENTS.map( ( c ) => ( { ...c, color: barColor( c.value ) } ) ) } |
| 87 |
format={ ( v ) => `${ v }` } |
| 88 |
/> |
| 89 |
<div className="bda-banner" style={ { marginTop: 14 } }> |
| 90 |
<div className="bda-banner-ico"><I.AlertTriangle size={ 16 } /></div> |
| 91 |
<div className="bd-cit-banner-copy"> |
| 92 |
<div className="bd-cit-banner-title">{ __( "Weakest area: Freshness · 61", "betterdocs" ) }</div> |
| 93 |
<div className="bd-cit-banner-sub">{ __( "How recently updated", "betterdocs" ) }</div> |
| 94 |
</div> |
| 95 |
<FauxBtn kind="soft" size="sm">{ __( "Fix stale content", "betterdocs" ) }</FauxBtn> |
| 96 |
</div> |
| 97 |
</Card> |
| 98 |
</div> |
| 99 |
</div> |
| 100 |
|
| 101 |
<Card padded title={ __( "Score distribution", "betterdocs" ) }> |
| 102 |
<HBar items={ DISTRIBUTION } format={ ( v ) => `${ v }` } /> |
| 103 |
</Card> |
| 104 |
|
| 105 |
<Card padded={ false } title={ __( "Lowest-scoring docs", "betterdocs" ) }> |
| 106 |
<table className="bda-table"> |
| 107 |
<thead> |
| 108 |
<tr> |
| 109 |
<th>{ __( "Doc", "betterdocs" ) }</th> |
| 110 |
<th style={ { width: 110 } }>{ __( "Health", "betterdocs" ) }</th> |
| 111 |
<th>{ __( "Weakest area", "betterdocs" ) }</th> |
| 112 |
<th className="bda-t-right">{ __( "Action", "betterdocs" ) }</th> |
| 113 |
</tr> |
| 114 |
</thead> |
| 115 |
<tbody> |
| 116 |
{ UNDER.map( ( u, i ) => ( |
| 117 |
<tr key={ i }> |
| 118 |
<td> |
| 119 |
<div className="bda-title-cell">{ u.t }</div> |
| 120 |
<div className="bd-cit-row-meta">{ u.cat }</div> |
| 121 |
</td> |
| 122 |
<td> |
| 123 |
<div className="bd-cit-health-cell"> |
| 124 |
<span className="bd-cit-health-grade-chip" style={ { background: GRADE_COLOR[ u.grade ] } }>{ u.grade }</span> |
| 125 |
<span className="bda-num bda-strong">{ u.score }</span> |
| 126 |
</div> |
| 127 |
</td> |
| 128 |
<td><Badge color="slate">{ u.weak }</Badge></td> |
| 129 |
<td className="bda-t-right"> |
| 130 |
<FauxBtn kind="ghost" size="sm" icon={ <I.TrendingUp size={ 13 } /> }>{ __( "Improve", "betterdocs" ) }</FauxBtn> |
| 131 |
</td> |
| 132 |
</tr> |
| 133 |
) ) } |
| 134 |
</tbody> |
| 135 |
</table> |
| 136 |
</Card> |
| 137 |
</div> |
| 138 |
); |
| 139 |
} |
| 140 |
|
