Repository navigation
Design-system bar charts for blog posts; use one in the graded prediction post - #1231
Merged
Merged
Conversation
…n post Adds a ```chart block to the website's blog renderer. The block holds a JSON spec (series, data, number format) and BlogChart renders it with Recharts and the ui-kit chart defaults the app's charts use: axis, grid, tooltip and legend styles, the --chart-* color tokens, Inter, and the PolicyEngine watermark. Header and label styles use token CSS variables inline because the website's Tailwind build uses a prefix that ui-kit's utility classes lack. The graded prediction post replaces its matplotlib PNG with a bar chart of the graded quantity: the 2024-to-2025 change, Census against the registered prediction, by group. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
MaxGhenis
added a commit
that referenced
this pull request
Sep 29, 2026
…hrow Fixes from the independent review of #1231 and #1232: - Reading time counted chart JSON as words, moving the 2025 SPM post from "10 min read" to "14 min read". A chart block now counts as the prose a reader reads in it (title, subtitle, note, source), which keeps the SPM post at 10 minutes and the graded prediction post at 13, as on main. - MarkdownFormatter imported BlogChart eagerly, so every research article shipped Recharts. It now goes through LazyBlogChart (next/dynamic, still server-rendered); articles without a chart block load none of it. - Specs that parsed could still throw during render (format.decimals outside 0 to 100, non-string title or legend, null or string bar values). The parsers now reject them, and formatChartValue clamps decimals. - The bar chart body is now rendered in tests (labels either side of zero, ticks, legend), alongside tests for the new rejections, reading-time parity, and pinned values from the published SPM figures. - Smaller: "positive" (an undefined --success on the website) falls back to the series color; the waterfall legend keeps LEGEND_STYLE's top padding; figures take their accessible name from the title; map tooltips near either edge anchor to it, and a tapped tooltip closes on a tap outside the map; the prediction chart's source says Table 5 publishes rates. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Contributor
Author
|
Landed via #1232, which carries this PR's commit
The independent Opus reviews approved this PR on the condition that it lands together with #1232. Details are in the audit comment on #1232. |
This was referenced Sep 30, 2026
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Blog posts can now carry charts that match the app's. The graded 2025 prediction post uses one in place of its matplotlib PNG.
What changes
website/src/components/blog/BlogChart.tsxrenders a```chartblock. The block holds a JSON spec: title, subtitle, x key, series with a chart color token name, data, a number format, and a source line. The component draws a Recharts bar chart with the ui-kit chart defaults the app's charts use:AXIS_STYLE,GRID_STYLE,TOOLTIP_STYLEandLEGEND_STYLE--chart-*color tokensPolicyEngineWatermarkValues above zero are labeled above their bar and values below zero beneath it. Axis ticks land on round steps, and the unit appears on the axis rather than on each label.
MarkdownFormatter(website) routeslanguage-charttoBlogChartand renders it without the code-block frame. The drift check passes, since no top-level declarations changed.recharts ^3.7.0is added to the website, the same version as the app and within ui-kit's peer range.The post swaps the static image for a bar chart of the graded quantity: the 2024-to-2025 change, Census against the registered prediction, by group. The unreferenced
prediction-chart.pngis removed.The title, subtitle and label styles use token CSS variables inline. ui-kit's components use unprefixed Tailwind classes, and the website's Tailwind build uses the
tw:prefix, so those classes never reach the website's CSS.ChartContainerand the watermark's alignment therefore rendered unstyled.The legacy
app/website router still has a blog route, and its MarkdownFormatter does not knowchartblocks. policyengine.org renders posts fromwebsite/.The post's cover image is still the old chart; a photographic cover follows in a separate change.
Checks
tsc --noEmitand ESLint are clean for the website. Prettier is clean. The markdown drift check passes.blog-chart.test.tsx:🤖 Generated with Claude Code