shadcn.io is not affiliated with official shadcn/ui
Sentiment Trends Comments Block for Solid
A line of net sentiment for the last 7 or 14 days with dashed release flags, a slider and day buttons that pick a day, and a band that lists three of that day's comments with its positive and negative counts.
Installation
Overview
See how people felt after each release, with this sentiment trend for Solid with Ark UI. A compact header names the product and holds a Segment Group that switches between the last 7 and 14 days. The first band is a figure: net sentiment for each day (positive comments minus negative ones) as a hand-built line in foreground weights, with dashed flags on the days a release shipped and their names written under it. Under the figure a range slider with arrow keys and a row of day buttons pick a day; a band then says "Thu 8 Oct: 9 positive, 17 negative" and lists three of that day's comments, each with a thumb and a word for its tone. The same numbers sit in a table for screen readers, and a live line speaks each pick. It is built from Segment Group, a native range input, Guides and a hand-drawn SVG, with a CSS entrance only. For release managers, community teams and anyone who wants the comments behind a dip.
FAQ
How do I use my own numbers?
Edit LINES, one line per day: the ISO date, the positive and negative counts, the release name (or empty) and three sample comments separated by ~, each starting with + for a positive comment or - for a negative one. The net figure, the line, the flags, the weekday names, the table and the sentences are worked out from those lines. The last 14 days are typed; the 7-day view is the last 7 of them.
How is the line drawn?
It is one SVG path in a 100 by 100 box that stretches to the figure, with a non-scaling stroke so the line keeps its weight. The dots, the flags and the zero label are small elements placed by percentage in a left-to-right box, so the chart does not mirror in right-to-left languages. The line, the dashed flags and the dots are drawn in foreground weights, so the chart is the same in every theme and needs no colour to be read.
What stays local, and how do I make it real?
Everything; the figures are typed for this demo and nothing is fetched. In a real app, classify each comment when it arrives (with word lists or a model), store the tone with it, and have the server count positive and negative comments per day. Keep the sample comments real: show the ones that moved the count most, not the first ones.
Is it accessible?
The chart is hidden from screen readers and replaced by a table in the figure with every day's counts. The slider is a native range input with a spoken value ("Thu 8 Oct, net −8") that moves with the arrow keys, Home and End, and each day button is named with the date and both counts. The selected button is pressed, not only coloured.