このコミットが含まれているのは:
@@ -5,10 +5,11 @@ import CountsSortHeader from '@/components/counts/CountsSortHeader'
|
||||
import { changeCountSort, countsRequestParams, readCountSort, writeCountSort } from '@/lib/counts'
|
||||
import { countsAxisLabel, countsFieldLabel, readCountsJSON, useCountsDefinition }
|
||||
from '@/lib/countsDefinitions'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { useLocale } from '@/lib/useLocale'
|
||||
import { useUITranslation } from '@/lib/useUITranslation'
|
||||
|
||||
import type { CountsResource, CountsResult } from '@/lib/counts'
|
||||
import type { CountsPivotHeader, CountsResource, CountsResult } from '@/lib/counts'
|
||||
import type { CountsAxis } from '@/lib/countsDefinitions'
|
||||
|
||||
|
||||
@@ -19,25 +20,26 @@ const CountsSummaryResults = (
|
||||
) => {
|
||||
const definition = useCountsDefinition ()
|
||||
const locale = useLocale ()
|
||||
const { label, message } = useUITranslation ('counts')
|
||||
const rowNumbers = params.get ('row_numbers') === '1'
|
||||
const { message } = useUITranslation ('counts')
|
||||
const numbered = params.get ('row_numbers') === '1'
|
||||
const rows = data.rows ?? []
|
||||
const cols = data.cols ?? []
|
||||
const axes = [...rows, ...cols]
|
||||
const cells = data.cells ?? []
|
||||
const rowKeys = [...new Set (cells.map (cell => JSON.stringify (
|
||||
cell.values.slice (0, rows.length))))]
|
||||
const columnKeys = data.columnValues?.map (values => JSON.stringify (values))
|
||||
?? [...new Set (cells.map (cell => JSON.stringify (cell.values.slice (rows.length))))]
|
||||
if (cols.length === 0 && columnKeys.length === 0) columnKeys.push ('[]')
|
||||
const rowHeaders: CountsPivotHeader[] = data.rowHeaders ?? [...new Set (
|
||||
cells.map (cell => JSON.stringify (cell.values.slice (0, rows.length))))]
|
||||
.map (key => ({ values: JSON.parse (key), kind: 'data' }))
|
||||
const columnHeaders: CountsPivotHeader[] = data.columnHeaders
|
||||
?? (data.columnValues ?? [[]]).map (values => ({ values, kind: 'data' }))
|
||||
const sorts = readCountSort (params.get ('sort'))
|
||||
const change = (key: string, additive: boolean) => update (
|
||||
'sort', writeCountSort (changeCountSort (sorts, key, additive)))
|
||||
const display = (value: string | number | null, axis: CountsAxis, index: number): string => {
|
||||
if (value == null) return axis.field === 'user' ? message ('bot').text : ''
|
||||
const logical = data.axisLabels?.[`a${index}`]?.[String (value)]
|
||||
if (axis.field === 'user') return message ('actorWithId', {
|
||||
name: logical || message ('notRegistered').text, id: value }).text
|
||||
name: logical || message ('notRegistered').text, id: value }).text
|
||||
if (logical != null) return logical
|
||||
if (['tags', 'user', 'language_code', 'source_language_code'].includes (axis.field))
|
||||
if (['tags', 'language_code', 'source_language_code'].includes (axis.field))
|
||||
return message ('notRegistered').text
|
||||
if (axis.field === 'changed_field') return message (countsFieldLabel (String (value))).text
|
||||
if (axis.field === 'event_type') return message (`events.${value}`).text
|
||||
@@ -45,71 +47,140 @@ const CountsSummaryResults = (
|
||||
return message (`common:categories.${value}`).text
|
||||
return String (value)
|
||||
}
|
||||
const drill = (values: (string | number | null)[]) => {
|
||||
const aggregateLabel = (header: CountsPivotHeader) => message (
|
||||
header.kind === 'grand_total' ? 'grandTotal' : 'subtotal').text
|
||||
const leading = Math.max (rows.length, cols.length > 0 ? 1 : 0)
|
||||
const levels = Math.max (1, cols.length)
|
||||
const names = (header: CountsPivotHeader, axes: CountsAxis[], offset: number) =>
|
||||
header.values.map ((value, index) => display (value, axes[index], offset + index))
|
||||
const columnKey = (header: CountsPivotHeader) => `${header.kind}:${JSON.stringify (header.values)}`
|
||||
const measureKey = (header: CountsPivotHeader) => header.values.length === 0 ? 'count'
|
||||
: `measure_${[...new TextEncoder ().encode (JSON.stringify (header.values))]
|
||||
.map (byte => byte.toString (16).padStart (2, '0')).join ('')}`
|
||||
const keys = [...(numbered ? ['row_number'] : []),
|
||||
...Array.from ({ length: leading }, (_, index) => `a${index}`),
|
||||
...columnHeaders.map (columnKey)]
|
||||
const full = new Map (cells.map (cell => [JSON.stringify (cell.values), cell.count]))
|
||||
const totals = new Map ((data.pivotTotals ?? []).map (cell => [
|
||||
JSON.stringify ([cell.row, cell.column]), cell.count]))
|
||||
const count = (row: CountsPivotHeader, column: CountsPivotHeader) =>
|
||||
(row.values.length === rows.length && column.values.length === cols.length)
|
||||
? full.get (JSON.stringify ([...row.values, ...column.values])) ?? 0
|
||||
: totals.get (JSON.stringify ([row.values, column.values])) ?? 0
|
||||
const drill = (row: CountsPivotHeader, column: CountsPivotHeader) => {
|
||||
const next = new URLSearchParams (params)
|
||||
const existing = readCountsJSON<unknown[]> (params, 'drill', [])
|
||||
next.set ('drill', JSON.stringify ([...existing,
|
||||
...axes.map ((axis, index) => ({ ...axis, value: values[index] }))]))
|
||||
...row.values.map ((value, index) => ({ ...rows[index], value })),
|
||||
...column.values.map ((value, index) => ({ ...cols[index], value }))]))
|
||||
next.set ('mode', 'details')
|
||||
next.delete ('sort')
|
||||
next.delete ('page')
|
||||
return `/counts/${resource}?${next}`
|
||||
}
|
||||
const keys = [...(rowNumbers ? ['row_number'] : []), ...rows.map ((_, index) => `a${index}`),
|
||||
...columnKeys.map ((_, index) => `cell${index}`)]
|
||||
let ordinal = (data.page - 1) * data.limit
|
||||
const rowLabels = rowHeaders.map (header => {
|
||||
const labels = names (header, rows, 0)
|
||||
const number = header.kind === 'data' ? String (++ordinal) : ''
|
||||
if (header.kind !== 'data') labels.push (aggregateLabel (header))
|
||||
return [...(numbered ? [number] : []),
|
||||
...Array.from ({ length: leading }, (_, index) => labels[index] ?? '')]
|
||||
})
|
||||
// This unmerged matrix is also the single source for TSV and HTML clipboard headings.
|
||||
const headingRows = Array.from ({ length: levels }, (_, level) => [
|
||||
...(numbered ? [level === 0 ? message ('rowNumberHeading').text : ''] : []),
|
||||
...Array.from ({ length: leading }, (_, index) =>
|
||||
level === 0 && rows[index] != null
|
||||
? countsAxisLabel (rows[index], definition, locale).text : ''),
|
||||
...columnHeaders.map ((header, index) => {
|
||||
if (cols.length === 0) return header.kind === 'data'
|
||||
? message ('count').text : aggregateLabel (header)
|
||||
if (level > header.values.length) return ''
|
||||
if (level === header.values.length)
|
||||
return header.kind === 'data' ? '' : aggregateLabel (header)
|
||||
const prefix = header.values.slice (0, level + 1)
|
||||
const previous = columnHeaders[index - 1]
|
||||
if (level < levels - 1 && previous != null
|
||||
&& JSON.stringify (previous.values.slice (0, level + 1)) === JSON.stringify (prefix))
|
||||
return ''
|
||||
return display (header.values[level], cols[level], rows.length + level)
|
||||
})])
|
||||
const matrix = rowHeaders.map ((header, index) => [...rowLabels[index],
|
||||
...columnHeaders.map (column => String (count (header, column)))])
|
||||
const headerCells = (level: number) => {
|
||||
const output = []
|
||||
for (let index = 0; index < columnHeaders.length; ++index)
|
||||
{
|
||||
const header = columnHeaders[index]
|
||||
if (cols.length > 0 && level > header.values.length) continue
|
||||
const aggregate = header.kind !== 'data' && level === header.values.length
|
||||
const leaf = level === levels - 1 || aggregate
|
||||
const text = aggregate ? aggregateLabel (header)
|
||||
: (cols.length === 0 ? message ('count').text
|
||||
: display (header.values[level], cols[level], rows.length + level))
|
||||
let span = 1
|
||||
if (!leaf)
|
||||
{
|
||||
const prefix = JSON.stringify (header.values.slice (0, level + 1))
|
||||
while (index + span < columnHeaders.length)
|
||||
{
|
||||
const sibling = columnHeaders[index + span]
|
||||
if (sibling.values.length <= level
|
||||
|| JSON.stringify (sibling.values.slice (0, level + 1)) !== prefix) break
|
||||
++span
|
||||
}
|
||||
}
|
||||
const sortKey = leaf ? measureKey (header) : `a${rows.length + level}`
|
||||
const field = leaf ? columnKey (header) : sortKey
|
||||
output.push (<CountsSortHeader key={`${level}:${field}:${index}`} field={field}
|
||||
colSpan={span} rowSpan={aggregate ? levels - level : 1} resizable={leaf}
|
||||
label={{ text, language: message ('count').language }}
|
||||
sorts={sorts.map (sort => sort.key === sortKey ? { ...sort, key: field } : sort)}
|
||||
change={(_, additive) => change (sortKey, additive)}/>)
|
||||
index += span - 1
|
||||
}
|
||||
return output
|
||||
}
|
||||
return <div className="min-h-0 flex-1 overflow-auto" data-counts-results aria-busy={pending}>
|
||||
<CountsSelectableTable family={`pivot_${resource}`} columns={keys}
|
||||
identity={`${countsRequestParams (params)}:${keys}`} className="text-left text-sm">
|
||||
<thead className="sticky top-0 z-20"><tr>
|
||||
{rowNumbers && <CountsRowNumber/>}
|
||||
{rows.map ((axis, index) => <CountsSortHeader key={axis.field} field={`a${index}`}
|
||||
label={countsAxisLabel (axis, definition, locale)} sorts={sorts}
|
||||
change={(key, additive) => update ('sort', writeCountSort (
|
||||
changeCountSort (sorts, key, additive)))}/>)}
|
||||
{columnKeys.map ((key, index) => {
|
||||
const values = JSON.parse (key) as (string | number | null)[]
|
||||
const name = values.map ((value, position) =>
|
||||
`${countsAxisLabel (cols[position], definition, locale).text}: ${
|
||||
display (value, cols[position], rows.length + position)}`).join (' / ')
|
||||
const sortKey = cols.length === 0 ? 'count' : `measure_${[
|
||||
...new TextEncoder ().encode (key)].map (byte =>
|
||||
byte.toString (16).padStart (2, '0')).join ('')}`
|
||||
return <CountsSortHeader key={key} field={`cell${index}`}
|
||||
label={{ text: name || message ('count').text,
|
||||
language: message ('count').language }}
|
||||
sorts={sorts.map (sort => sort.key === sortKey
|
||||
? { ...sort, key: `cell${index}` } : sort)}
|
||||
change={(_, additive) => update ('sort', writeCountSort (
|
||||
changeCountSort (sorts, sortKey, additive)))}/>
|
||||
})}
|
||||
</tr></thead>
|
||||
<tbody>{rowKeys.map ((rowKey, rowIndex) => {
|
||||
const rowValues = JSON.parse (rowKey) as (string | number | null)[]
|
||||
return <tr key={rowKey}>
|
||||
{rowNumbers && <CountsRowNumber value={(data.page - 1) * data.limit + rowIndex + 1}/>}
|
||||
{rowValues.map ((value, index) => <td key={index}
|
||||
className="overflow-hidden break-words border px-2 py-1 dark:border-slate-700"
|
||||
data-counts-copy={display (value, rows[index], index)}
|
||||
lang={(value == null && rows[index].field === 'user')
|
||||
? message ('bot').language : (rows[index].field === 'event_type'
|
||||
? message (`events.${value}`).language : undefined)}>
|
||||
{display (value, rows[index], index)}</td>)}
|
||||
{columnKeys.map (columnKey => {
|
||||
const columnValues = JSON.parse (columnKey) as (string | number | null)[]
|
||||
const values = [...rowValues, ...columnValues]
|
||||
const cell = cells.find (cell => JSON.stringify (
|
||||
cell.values) === JSON.stringify (values))
|
||||
return <td key={columnKey} data-counts-copy={String (cell?.count ?? 0)}
|
||||
className="border px-2 py-1 dark:border-slate-700">
|
||||
<PrefetchLink to={drill (values)}>{cell?.count ?? 0}</PrefetchLink>
|
||||
</td>
|
||||
})}
|
||||
</tr>
|
||||
})}</tbody>
|
||||
copyTable={() => ({ columns: keys.map ((_, index) => ({ label: headingRows[0][index] })),
|
||||
headerRows: headingRows, rows: matrix })}
|
||||
identity={`${countsRequestParams (params)}:${JSON.stringify (keys)}`}
|
||||
className="text-left text-sm">
|
||||
<thead className="sticky top-0 z-20">
|
||||
{headingRows.map ((_, level) => <tr key={level}>
|
||||
{level === 0 && <>
|
||||
{numbered && <CountsRowNumber rowSpan={levels}/>}
|
||||
{Array.from ({ length: leading }, (_, index) => rows[index] == null
|
||||
? <th key={index} rowSpan={levels}/>
|
||||
: <CountsSortHeader key={rows[index].field} field={`a${index}`}
|
||||
rowSpan={levels} label={countsAxisLabel (rows[index], definition, locale)}
|
||||
sorts={sorts} change={change}/>)}
|
||||
</>}
|
||||
{headerCells (level)}
|
||||
</tr>)}
|
||||
</thead>
|
||||
<tbody>{rowHeaders.map ((row, index) => <tr key={columnKey (row)}>
|
||||
{rowLabels[index].map ((value, offset) => <td key={offset} data-counts-copy={value}
|
||||
data-counts-aggregate={row.kind !== 'data' ? '' : undefined}
|
||||
className={cn ('overflow-hidden break-words border px-2 py-1 dark:border-slate-700',
|
||||
row.kind !== 'data' && 'bg-slate-200 text-slate-950 font-semibold',
|
||||
row.kind !== 'data' && 'dark:bg-slate-700 dark:text-slate-50',
|
||||
numbered && offset === 0 && 'text-right tabular-nums')}>{value}</td>)}
|
||||
{columnHeaders.map (column => <td key={columnKey (column)}
|
||||
data-counts-copy={String (count (row, column))}
|
||||
data-counts-aggregate={(row.kind !== 'data' || column.kind !== 'data')
|
||||
? '' : undefined}
|
||||
className={cn ('border px-2 py-1 dark:border-slate-700',
|
||||
(row.kind !== 'data' || column.kind !== 'data')
|
||||
&& 'bg-slate-200 text-slate-950 font-semibold',
|
||||
(row.kind !== 'data' || column.kind !== 'data')
|
||||
&& 'dark:bg-slate-700 dark:text-slate-50')}>
|
||||
<PrefetchLink to={drill (row, column)}>{count (row, column)}</PrefetchLink>
|
||||
</td>)}
|
||||
</tr>)}</tbody>
|
||||
</CountsSelectableTable>
|
||||
{cells.length === 0 && <p>{label ('empty')}</p>}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
||||
export default CountsSummaryResults
|
||||
|
||||
新しいイシューから参照
ユーザーをブロックする