Spaces:
Sleeping
Sleeping
File size: 6,144 Bytes
f8df83d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 | import { useState, useRef } from 'react'
import {
ComposedChart, Scatter, Line, XAxis, YAxis, CartesianGrid,
Tooltip, ReferenceLine, ResponsiveContainer
} from 'recharts'
import { effectiveSentiment, sentimentColor, arcTitle } from '../utils/sentiment'
import { rollingAverage } from '../utils/stats'
import { downloadChartPng } from '../utils/chartExport'
import CustomTooltip from './CustomTooltip'
import ChartControls from './ChartControls'
// Generate tick indices based on date cadence
function getTickIndices(sorted, isMonthly) {
if (sorted.length <= 1) return [0]
const cadenceDays = isMonthly ? 30 : 7
const cadenceMs = cadenceDays * 24 * 60 * 60 * 1000
const first = new Date(sorted[0].created_at).getTime()
const ticks = [0]
let lastTickTime = first
sorted.forEach((r, i) => {
if (i === 0) return
const t = new Date(r.created_at).getTime()
if (t - lastTickTime >= cadenceMs) {
ticks.push(i)
lastTickTime = t
}
})
// Always include last
const last = sorted.length - 1
if (ticks[ticks.length - 1] !== last) ticks.push(last)
// Limit to max 10 ticks to avoid overcrowding
if (ticks.length > 10) {
const step = Math.ceil(ticks.length / 10)
return ticks.filter((_, i) => i % step === 0 || i === ticks.length - 1)
}
return ticks
}
function formatDateTick(dateStr, isMonthly) {
const d = new Date(dateStr)
if (isMonthly) {
return d.toLocaleDateString('en-US', { month: 'short', year: '2-digit' })
}
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })
}
export default function SentimentArc({ reviews }) {
const [displayMode, setDisplayMode] = useState('both')
const chartRef = useRef(null)
if (!reviews || reviews.length === 0) return null
// Sort chronologically
const sorted = [...reviews].sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
// Compute effective sentiment for each review
const withEffective = sorted.map((r) => {
const effective = effectiveSentiment(r.sentiment_label, r.sentiment_score)
return { ...r, effective, color: sentimentColor(effective), value: effective }
})
// Rolling average data — rollingAverage expects items with a `value` field
const averaged = rollingAverage(withEffective, 7)
// Determine tick density
const firstDate = new Date(sorted[0].created_at)
const lastDate = new Date(sorted[sorted.length - 1].created_at)
const rangeMs = lastDate - firstDate
const threeMonthsMs = 90 * 24 * 60 * 60 * 1000
const isMonthly = rangeMs >= threeMonthsMs
// Dynamic title
const trend = arcTitle(sorted)
const titleMap = {
improved: 'Sentiment improved over time',
declined: 'Sentiment declined over time',
'remained stable': 'Sentiment remained stable over time',
}
const title = titleMap[trend] || 'Sentiment over time'
// Scatter data uses index as x for consistent positioning across both datasets
const scatterData = withEffective.map((r, i) => ({ ...r, x: i }))
const trendData = averaged.map((r, i) => ({ x: i, avg: r.avg }))
// X-axis ticks — date-cadence based (weekly or monthly)
const tickIndices = getTickIndices(sorted, isMonthly)
const handleDownload = () => {
if (chartRef.current) downloadChartPng(chartRef.current, 'sentiment-arc.png')
}
return (
<div
className="bg-gray-800 rounded-lg p-6"
aria-label="Sentiment arc chart showing sentiment over time"
>
<div className="flex items-start justify-between mb-4 flex-wrap gap-2">
<div>
<h3 className="text-white font-semibold text-lg">{title}</h3>
<span className="sr-only">
Chart showing sentiment scores of {reviews.length} reviews over time. Sentiment {trend}.
</span>
</div>
<ChartControls
displayMode={displayMode}
setDisplayMode={setDisplayMode}
onDownload={handleDownload}
/>
</div>
<div ref={chartRef} className="mb-2">
<ResponsiveContainer width="100%" height={300}>
<ComposedChart margin={{ top: 5, right: 20, left: 0, bottom: 5 }}>
<CartesianGrid strokeDasharray="3 3" stroke="#374151" />
<XAxis
dataKey="x"
type="number"
domain={[0, sorted.length - 1]}
ticks={tickIndices}
tickFormatter={(i) => {
const review = sorted[Math.round(i)]
return review ? formatDateTick(review.created_at, isMonthly) : ''
}}
stroke="#6b7280"
tick={{ fill: '#9ca3af', fontSize: 11 }}
/>
<YAxis
domain={[0, 1]}
stroke="#6b7280"
tick={{ fill: '#9ca3af', fontSize: 11 }}
tickFormatter={(v) => v.toFixed(1)}
label={{ value: 'Sentiment', angle: -90, position: 'insideLeft', fill: '#9ca3af', fontSize: 12 }}
/>
<Tooltip content={<CustomTooltip />} />
<ReferenceLine y={0.5} stroke="#6b7280" strokeDasharray="4 4" />
{(displayMode === 'points' || displayMode === 'both') && (
<Scatter
data={scatterData}
dataKey="effective"
shape={(props) => {
const { cx, cy, payload } = props
return (
<circle cx={cx} cy={cy} r={5} fill={payload.color} fillOpacity={0.85} style={{ pointerEvents: 'all' }} />
)
}}
/>
)}
{(displayMode === 'trend' || displayMode === 'both') && (
<Line
data={trendData}
type="monotone"
dataKey="avg"
stroke="#3b82f6"
strokeWidth={2}
dot={false}
connectNulls
tooltipType="none"
/>
)}
</ComposedChart>
</ResponsiveContainer>
</div>
<p className="text-gray-500 text-xs mt-2">
0 = Negative, 1 = Positive. Trend line shows 7-review rolling average.
</p>
</div>
)
}
|