#434

frontend/src/components/counts/CountsControls.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useId, useState } from 'react'
 
+import CountsStateFilters from '@/components/counts/CountsStateFilters'
 import CountsFieldTree from '@/components/counts/CountsFieldTree'
 import DateTimeField from '@/components/common/DateTimeField'
 import FormField from '@/components/common/FormField'
 import { Button } from '@/components/ui/button'
-import { normaliseCountsParams } from '@/lib/counts'
+import { isCountsState, normaliseCountsParams } from '@/lib/counts'
 import { fetchTagByName } from '@/lib/tags'
 import { inputClass } from '@/lib/utils'
 import { useLocale } from '@/lib/useLocale'
@@ -42,7 +43,8 @@ const CountsControls = (
   }, [order, nestedJSON])
   const [error, setError] = useState (false)
   const [pending, setPending] = useState (false)
-  const mode = draft.get ('mode') ?? 'summary'
+  const mode = draft.get ('mode') ?? 'state'
+  const state = isCountsState (draft)
   const update = (key: string, value: string) => {
     setDraft (previous => {
       const next = new URLSearchParams (previous)
@@ -58,11 +60,12 @@ const CountsControls = (
     try
     {
       const next = new URLSearchParams (draft)
-      for (const key of resource === 'posts' ? ['tag'] : ['resource_id'])
+      for (const key of (state || resource === 'posts') ? ['tag'] : ['resource_id'])
       {
 	const value = next.get (key)?.trim () ?? ''
 	if (value && !/^[1-9][0-9]*$/.test (value))
 	{
+	  if (state && next.get ('kind') === 'external') throw new Error ()
 	  const tag = await fetchTagByName (value, locale)
 	  if (tag == null)
 	    throw new Error ()
@@ -96,10 +99,10 @@ const CountsControls = (
 	  <select className={inputClass (false, 'w-auto py-1')}
 	      aria-label={message ('mode').text} lang={message ('mode').language}
 	      value={mode} onChange={event => update ('mode', event.target.value)}>
-	    <option value="summary" lang={message ('summary').language}>
-	      {message ('summary').text}</option>
-	    <option value="details" lang={message ('details').language}>
-	      {message ('details').text}</option>
+	    {[['state', 'summary'], ['trend', 'state.trend'], ['snapshot', 'state.details'],
+	      ['summary', 'state.history'], ['details', 'state.historyDetails']].map (
+		([value, key]) => <option key={value} value={value} lang={message (key).language}>
+		  {message (key).text}</option>)}
 	  </select>
 	</div>
 	{error && <p role="alert">{label ('shared:messages.checkInputModern')}</p>}
@@ -115,7 +118,9 @@ const CountsControls = (
 		    }}/>
 		{label ('nested.asJSON')}
 	      </label>
-	      {mode === 'summary' ? (
+	      {(mode === 'state' || mode === 'trend') ? (
+		  <p className="text-sm">{label (
+		      mode === 'trend' ? 'state.trend' : 'state.list')}</p>) : (mode === 'summary' ? (
 		  <label className="flex flex-wrap items-center gap-2">
 		    {label ('axis')}
 		    <select className={inputClass (false, 'w-auto py-1')}
@@ -130,10 +135,11 @@ const CountsControls = (
 		  <CountsFieldTree resource={resource} params={draft} update={(key, value) => {
 		    update (key, value)
 		    if (key === 'order') reorder (value)
-		  }}/>)}
+		  }}/>))}
 	    </fieldset>
 	    <fieldset className="min-w-0 space-y-2" data-counts-filters>
 	      <legend className="mb-2 font-semibold">{label ('filters')}</legend>
+	      {state ? <CountsStateFilters params={draft} update={update}/> : <>
 	      <label className="flex items-center gap-1">
 		<input type="checkbox" checked={draft.get ('latest') !== '0'}
 		    onChange={event => update ('latest', event.target.checked ? '1' : '0')}/>
@@ -161,6 +167,7 @@ const CountsControls = (
 			      className={inputClass (false, 'py-1')}/>}
 			</FormField>))}
 	      </div>
+	      </>}
 	    </fieldset>
 	  </div>
 	</div>

frontend/src/components/counts/CountsStateFilters.tsx

@@ -0,0 +1,63 @@
+import DateTimeField from '@/components/common/DateTimeField'
+import FormField from '@/components/common/FormField'
+import { inputClass } from '@/lib/utils'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+
+const CountsStateFilters = (
+    { params, update }: {
+	params: URLSearchParams
+	update: (key: string, value: string) => void },
+) => {
+  const { label, message } = useUITranslation ('counts')
+  const trend = params.get ('mode') === 'trend'
+  const dates = trend ? ['from', 'before'] : ['at']
+  return (
+      <>
+	<div className="grid gap-2 md:grid-cols-2">
+	  {dates.map (key => {
+	    const text = key === 'at' ? 'state.at' : `fields.${key}`
+	    return <FormField key={key} label={label (text)}>
+	      {() => <DateTimeField value={params.get (key) ?? ''}
+		  aria-label={message (text).text} lang={message (text).language}
+		  onChange={value => update (key, value ?? '')}/>}
+	    </FormField>
+	  })}
+	</div>
+	{trend && <FormField label={label ('state.grain')}>
+	  {() => <select value={params.get ('grain') ?? 'month'}
+	      className={inputClass (false, 'py-1')}
+	      aria-label={message ('state.grain').text}
+	      onChange={event => update ('grain', event.target.value)}>
+	    {['day', 'month', 'year'].map (grain => (
+		<option key={grain} value={grain} lang={message (`state.grains.${grain}`).language}>
+		  {message (`state.grains.${grain}`).text}</option>))}
+	  </select>}
+	</FormField>}
+	<div className="grid gap-2 md:grid-cols-2">
+	  <FormField label={label ('columns.kind')}>
+	    {() => <select value={params.get ('kind') ?? 'internal'}
+		className={inputClass (false, 'py-1')} aria-label={message ('columns.kind').text}
+		onChange={event => update ('kind', event.target.value)}>
+	      {['internal', 'external'].map (kind => (
+		  <option key={kind} value={kind} lang={message (`kinds.${kind}`).language}>
+		    {message (`kinds.${kind}`).text}</option>))}
+	    </select>}
+	  </FormField>
+	  <FormField label={label ('fields.tag')}>
+	    {() => <input value={params.get ('tag') ?? ''} required={trend}
+		aria-label={message ('fields.tag').text} className={inputClass (false, 'py-1')}
+		onChange={event => update ('tag', event.target.value)}/>}
+	  </FormField>
+	  <FormField label={label ('fields.limit')}>
+	    {() => <input type="number" min={1} max={100}
+		value={params.get ('limit') ?? '20'} aria-label={message ('fields.limit').text}
+		className={inputClass (false, 'py-1')}
+		onChange={event => update ('limit', event.target.value)}/>}
+	  </FormField>
+	</div>
+      </>)
+}
+
+
+export default CountsStateFilters

frontend/src/components/counts/CountsStateResults.tsx

@@ -0,0 +1,56 @@
+import LocalisedText from '@/components/LocalisedText'
+import PrefetchLink from '@/components/PrefetchLink'
+import CountsSelectableTable from '@/components/counts/CountsSelectableTable'
+import CountsSortHeader from '@/components/counts/CountsSortHeader'
+import { changeCountSort, readCountSort, writeCountSort } from '@/lib/counts'
+import { countsStateCell, countsStateDrill, countsStateFields } from '@/lib/countsState'
+import { useLocale } from '@/lib/useLocale'
+import { useUITranslation } from '@/lib/useUITranslation'
+
+import type { CountsResult } from '@/lib/counts'
+
+
+const CountsStateResults = (
+    { data, params, pending, update }: {
+	data: CountsResult
+	params: URLSearchParams
+	pending: boolean
+	update: (key: string, value: string) => void },
+) => {
+  const locale = useLocale ()
+  const { label, message } = useUITranslation ('counts')
+  const trend = params.get ('mode') === 'trend'
+  const fields = countsStateFields (trend)
+  const sorts = readCountSort (params.get ('sort') ?? (trend ? 'period:asc' : 'count:desc'))
+  return (
+      <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
+	<CountsSelectableTable family={trend ? 'state_trend' : 'state_tags'}
+	    columns={fields.map (field => field.key)} identity={params.toString ()}
+	    className="text-left text-sm">
+	  <thead className="sticky top-0 z-20"><tr>
+	    {fields.map (field => (
+		<CountsSortHeader key={field.key} field={field.key} label={message (field.label)}
+		    sorts={sorts} change={(key, additive) => update (
+			'sort', writeCountSort (changeCountSort (sorts, key, additive)))}/>))}
+	  </tr></thead>
+	  <tbody>{(data.stateRows ?? []).map (row => (
+	      <tr key={`${row.kind}:${row.tagId}:${row.at}`}>
+		{fields.map (field => {
+		  const value = countsStateCell (row, field.key, locale)
+		  return <td key={field.key} data-counts-copy={value}
+		      className="break-words border-b px-2 py-1 dark:border-slate-700">
+		    {field.key === 'count' && row.count != null
+		     ? <PrefetchLink to={countsStateDrill (params, row.at, 'posts', row)}>
+			{value}</PrefetchLink>
+		     : <LocalisedText language={message (field.label).language}>
+			{value}</LocalisedText>}
+		  </td>
+		})}
+	      </tr>))}</tbody>
+	</CountsSelectableTable>
+	{data.stateRows?.length === 0 && <p className="p-2">{label ('empty')}</p>}
+      </div>)
+}
+
+
+export default CountsStateResults