@stealthscale/component-charts 0.2.2 → 0.2.3

package/locales/en/specimen/funnel-chart.json

@@ -0,0 +1,84 @@
+{
+  "about": "The stages one set passes through, each a trapezoid as wide as its count, above a table of each stage's count and its two rates. A funnel shows which step loses people, and a bar chart compares values that are not nested.",
+  "accounts": "Accounts",
+  "advert": {
+    "about": "valueOptions writes the counts in compact notation, on the stages and in the table. The counts span three orders of magnitude, so every stage after the first is a sliver and the table writes the rates the widths cannot show. A rate takes two significant digits, so the 3,900 sign-ups are 0.16% of the 2.4 million impressions, where a whole percent would write 0%.",
+    "caption": "3,900 sign-ups came from 2.4 million impressions of the advert.",
+    "label": "Advert funnel for the week",
+    "title": "Compact counts"
+  },
+  "checkout": {
+    "about": "A shop's checkout over a month, from visits to payments. Each stage's count is written on it, and the table under the plot writes each count's share of the stage before and of the first stage. biggestDrop returns the step that loses the most people, and the caption names it.",
+    "caption": "The biggest loss is before “{{stage}}”: {{lost, number}} people.",
+    "label": "Checkout funnel for September",
+    "title": "Checkout"
+  },
+  "hiring": {
+    "about": "A hiring pipeline in the teal palette. values false leaves the counts to the table.",
+    "caption": "12 of 1,280 applicants were hired, 0.94% of them.",
+    "label": "Hiring pipeline for the quarter",
+    "title": "Palette"
+  },
+  "narrow": {
+    "about": "The checkout in a room 20rem wide, the column of a phone. The table scrolls sideways where its columns do not fit, and its scroll area is then a region in the tab order, named by stepsLabel.",
+    "title": "Narrow room"
+  },
+  "overall": "Of first",
+  "people": "People",
+  "quiet": {
+    "about": "A funnel without stages renders the empty state in the plot's place, at the plot's ratio, and no table.",
+    "caption": "The shop's checkout this week.",
+    "empty": "No sessions in this period.",
+    "title": "Empty"
+  },
+  "rates": {
+    "about": "defaultIndex opens the tooltip at the last stage when the chart first renders. The tooltip writes the stage's count and both rates: 73% of the stage before and 12% of every visit.",
+    "caption": "73% of the people who start checkout pay, 12% of every visit.",
+    "title": "Tooltip"
+  },
+  "replay": {
+    "about": "animate grows each stage from its middle when the chart mounts, and Replay mounts the chart again. The counts are written once the stages are in place. Under reduced motion recharts renders the stages at once.",
+    "caption": "The shop's checkout over September.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "shape": {
+    "about": "steps false leaves the table out, for a page where something else writes the rates. The counts are still written on the stages.",
+    "caption": "Nearly half of the people who add a product to a basket pay.",
+    "title": "Without the table"
+  },
+  "stage": "Stage",
+  "stages": {
+    "applied": "Applied",
+    "basket": "Added to basket",
+    "checkout": "Started checkout",
+    "clicks": "Clicked",
+    "customers": "Became customers",
+    "hired": "Hired",
+    "impressions": "Saw the advert",
+    "interviewed": "Interviewed",
+    "offered": "Offered",
+    "paid": "Paid",
+    "screened": "Screened",
+    "signups": "Signed up",
+    "trials": "Started a trial",
+    "viewed": "Viewed a product",
+    "visited": "Visited the shop",
+    "visits": "Visited the site"
+  },
+  "step": "Of previous",
+  "steps": "Conversion by stage",
+  "title": "Funnel chart",
+  "trial": {
+    "about": "Two stages, a trial's conversion to a paying account: the first stage narrows to the second, and the second is a rectangle.",
+    "caption": "13% of trials became paying accounts.",
+    "label": "Trial conversion for September",
+    "title": "Two stages"
+  },
+  "widening": {
+    "about": "The checkout with its fourth stage counted from every month's orders, so more people start checkout than added a product to a basket. The chart renders the stages as they are, the table writes 150% for the stage that widens, and funnelWidenings returns it for the caption.",
+    "caption": "“{{stages}}” counts more people than the stage before it, so these stages are not nested.",
+    "label": "Checkout funnel from two queries",
+    "title": "A funnel that widens"
+  }
+}

package/locales/en/specimen/gauge-chart.json

@@ -0,0 +1,68 @@
+{
+  "about": "One value on a dial from a range's minimum to its maximum, with zones that name what the value means. A gauge shows where one value is in a range, and a bar chart compares values.",
+  "critical": {
+    "about": "Past the error budget the reading takes the error palette's color, and the name under the figure names its zone, so no one has to match a color.",
+    "caption": "p99 latency is 1,080ms, past the 900ms error budget.",
+    "title": "Critical zone"
+  },
+  "disk": {
+    "about": "A share as a percentage: max 1 ends the dial at the whole volume, and valueOptions writes the figure and the range's ends in percent.",
+    "caption": "The primary volume is 86% full, in the filling zone.",
+    "label": "Disk use of the primary volume",
+    "title": "Percentage"
+  },
+  "latency": {
+    "about": "A checkout API's p99 latency against its error budget. The reading fills the dial from 0 in its zone's color, the figure and the zone's name are written in the middle, and the zones form the thin ring outside.",
+    "caption": "p99 latency is 740ms, inside the 900ms error budget.",
+    "label": "Checkout p99 latency",
+    "title": "Latency"
+  },
+  "narrow": {
+    "about": "The latency in a room 20rem wide, the column of a phone.",
+    "title": "Narrow room"
+  },
+  "overrun": {
+    "about": "A value past max fills the dial to its end, and the figure writes the value itself, 4,000ms, where the dial ends at 1,200ms.",
+    "caption": "p99 latency is 4,000ms, more than three times the dial's 1,200ms.",
+    "title": "Past max"
+  },
+  "quiet": {
+    "about": "A value that is not a finite number renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Checkout p99 latency over the last five minutes.",
+    "empty": "No reading in the last five minutes.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate sweeps the reading and the zones in from the start of the dial when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the dial at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "short": {
+    "about": "Zones that end before max leave the rest of the range as the track, so the dial shows which part of its range the zones name.",
+    "caption": "No zone covers latency past 900ms, where 1,050ms is.",
+    "title": "Zones that end early"
+  },
+  "throughput": {
+    "about": "Without zones the reading takes the theme's first series color, and centerLabel writes the unit under the figure.",
+    "caption": "The service handles 3,120 requests a second of the 5,000 it was tested to.",
+    "label": "Checkout throughput",
+    "title": "Without zones",
+    "unit": "requests a second"
+  },
+  "tiles": {
+    "about": "Three gauges in a grid of three columns, each captioned by its resource. limits false leaves the range's ends out at this size.",
+    "cpu": "CPU",
+    "disk": "Disk",
+    "memory": "Memory",
+    "title": "Tiles"
+  },
+  "title": "Gauge chart",
+  "zones": {
+    "critical": "Critical",
+    "filling": "Filling",
+    "fine": "Fine",
+    "full": "Full",
+    "healthy": "Healthy",
+    "watch": "Watch"
+  }
+}

package/locales/en/specimen/heatmap.json

@@ -0,0 +1,187 @@
+{
+  "about": "A value for every pair of a row and a column, such as each hour of each weekday, as a grid of cells colored from their values. A reader finds a dark block faster than the largest number in a table, and reads the exact value in the readout or printed in the cell. A missing value is a cell without a fill and with a dashed edge, apart from the faintest value, which keeps a tint. The grid is one tab stop: the arrow keys walk its cells, Home and End go to a row's ends, and a screen reader reads each cell with its row and column headings. calendarCells lays daily readings out as a calendar, and cohortCells lays retention out by cohort.",
+  "authorisations": {
+    "about": "A week of card authorisations per hour. The cells run from 12% of the first series color at the fewest to the whole color at the most, and the key under the grid writes both ends. The caption names the busiest hour, found in the readings.",
+    "caption": "{{day}} at {{hour}}:00 is the busiest hour, with {{count, number}} authorisations.",
+    "corner": "Weekday",
+    "label": "Card authorisations per hour, by weekday",
+    "title": "Authorisations per hour",
+    "value": "Authorisations"
+  },
+  "attendance": {
+    "about": "A teaching year's attendance per school day, 36 weeks at size sm in a room narrower than the grid. The grid scrolls sideways with the weekdays sticky at its start, and the dip through the winter term reads as a shape.",
+    "caption": "Attendance dips through the winter term, to 82% in weeks 15 and 16.",
+    "corner": "Day",
+    "label": "Share of pupils present per school day, by teaching week",
+    "title": "Dense",
+    "value": "Present",
+    "week": "W{{week}}"
+  },
+  "bookings": {
+    "about": "onSelect receives the calendar's own cell, with its date as the readings write it and its label, the date in the locale's words. The line under the grid writes the picked night. The squares are size lg, 24px, the pointer target WCAG 2.5.8 asks for.",
+    "caption": "The conference filled all 84 rooms from 12 to 14 May.",
+    "label": "Rooms booked per night, April to June 2026",
+    "none": "Press a night to pick it.",
+    "picked": "Picked: {{date}}, {{count, number}} of 84 rooms booked.",
+    "title": "Picking a day",
+    "value": "Rooms booked"
+  },
+  "builds": {
+    "about": "values prints each cell's value in black or white. The browser picks the one that contrasts more with the cell, at least 4.5:1 on every cell.",
+    "caption": "{{pipeline}} builds for {{minutes, number}} minutes on Friday, when everyone merges.",
+    "corner": "Pipeline",
+    "label": "Build minutes per pipeline, by weekday",
+    "title": "Values in the cells",
+    "value": "Build minutes"
+  },
+  "clinic": {
+    "about": "measure=\"count\" writes how many patients remained in each cell while the fill is the rate, so February's dark row reads as the seven patients it is.",
+    "caption": "February's row is the darkest, and it is 7 patients: 6 of them still came in May.",
+    "cohort": "{{label}} · {{size, number}}",
+    "corner": "Intake",
+    "label": "Patients still in the programme, by intake month and month since intake",
+    "period": "M{{period}}",
+    "title": "Counts in the cells",
+    "value": "Still in the programme"
+  },
+  "deploys": {
+    "about": "calendarCells lays a year of deploys out as a calendar: a square per day, a row per weekday from the locale's first day, and the weeks under their months. The window runs from October to September, so the first and last weeks have empty places. The fortnight in February is dashed: the collector was offline, which is not a quiet fortnight, while the weekends beside it are measured zeros.",
+    "caption": "The release week of 9 March was the busiest, with {{count, number}} deploys.",
+    "label": "Deploys per day, October 2025 to September 2026",
+    "missing": "Not recorded",
+    "title": "Calendar",
+    "value": "Deploys"
+  },
+  "days": {
+    "fri": "Fri",
+    "mon": "Mon",
+    "sat": "Sat",
+    "sun": "Sun",
+    "thu": "Thu",
+    "tue": "Tue",
+    "wed": "Wed"
+  },
+  "depots": {
+    "about": "Two weeks of parcels scanned per depot, one heatmap each. heatmapDomain over both weeks' readings gives both grids one domain, so last week's cells are paler than this week's and both keys end at 1,940. On their own domains the two grids would look alike.",
+    "corner": "Depot",
+    "label": "Parcels scanned per depot and hour, {{week}}",
+    "last": "Last week",
+    "this": "This week",
+    "title": "One domain for two grids",
+    "value": "Parcels",
+    "weeks": {
+      "last": "last week",
+      "this": "this week"
+    }
+  },
+  "incidents": {
+    "about": "onSelect receives the reading of the cell a press, Enter or Space selects, and the line under the grid writes it. The arrow keys move between the cells first.",
+    "caption": "checkout-api failed at noon: 512 responses were 5xx.",
+    "corner": "Service",
+    "label": "5xx responses per service, by hour",
+    "none": "Press a cell to pick an hour.",
+    "picked": "Picked: {{service}} at {{hour}}:00, {{count, number}} responses.",
+    "title": "Picking a cell",
+    "value": "5xx responses"
+  },
+  "names": {
+    "antwerpen": "Antwerpen",
+    "cardiology": "Cardiology",
+    "customer-success": "Customer success",
+    "data-platform": "Data platform",
+    "design": "Design",
+    "duisburg": "Duisburg",
+    "neurology": "Neurology",
+    "oncology": "Oncology",
+    "paediatrics": "Paediatrics",
+    "payments": "Payments",
+    "respiratory": "Respiratory",
+    "rotterdam": "Rotterdam",
+    "security": "Security"
+  },
+  "narrow": {
+    "about": "The authorisations in a room 20rem wide, the column of a phone. The grid scrolls sideways inside its own box, the weekdays remain at its start, and the page does not move.",
+    "title": "Narrow room"
+  },
+  "pages": {
+    "about": "weekStartsOn starts the weeks on a stated day, here Monday for a team that works Monday to Friday, so the weekend rows are at the bottom. Without it the weeks start on the locale's first day: Sunday in American English, Monday in German.",
+    "caption": "The incident on 17 February paged the team {{count, number}} times.",
+    "label": "On-call pages per day, 5 January to 5 April 2026",
+    "title": "Week start",
+    "value": "Pages"
+  },
+  "palette": {
+    "about": "color takes the scale's color: a hue, a semantic palette or a series color. Here the authorisations run from 12% to the whole of the purple hue's chart color.",
+    "title": "Palette"
+  },
+  "quarter": {
+    "label": "Deploys per day, January to March 2026"
+  },
+  "quarters": {
+    "q1": "Q1",
+    "q2": "Q2",
+    "q3": "Q3",
+    "q4": "Q4"
+  },
+  "quiet": {
+    "about": "A heatmap without a row or a column renders the empty state in the grid's place.",
+    "caption": "Claims assigned per adjuster, by week.",
+    "empty": "No claims were assigned in this period.",
+    "label": "Claims assigned per adjuster, by week",
+    "title": "Empty"
+  },
+  "readout": {
+    "about": "defaultIndex opens the readout at the busiest hour when the heatmap first renders, and lights that hour's weekday and column headings. The pointer and the arrow keys move it, and Escape hides it.",
+    "title": "Readout"
+  },
+  "shape": {
+    "about": "shape sets the cells' form: a block, which widens to a printed value, or a square with a 2px corner, which doesn't print its value. Beside squares the rows are as far apart as the columns. A square keeps its side while its column's heading fits it, so a calendar hides its week headings and names its months above them.",
+    "title": "Shapes"
+  },
+  "signups": {
+    "about": "cohortCells lays retention out by cohort: a row per signup month with its size, a column per month since signup, and each cell filled from the share that remained. A cohort's row ends in empty places after its last count, and March's second month, which the export lacked, is dashed. average adds a row of the rates weighted by each cohort's size.",
+    "average": "All cohorts",
+    "caption": "Cohorts from May on kept 59 to 63% in their first month, against 49 to 54% before the new onboarding.",
+    "cohort": "{{label}} · {{size, number}}",
+    "corner": "Signed up",
+    "label": "Share of customers still active, by signup month and month since signup",
+    "missing": "Not exported",
+    "period": "M{{period}}",
+    "title": "Cohorts",
+    "value": "Still active"
+  },
+  "size": {
+    "about": "size sets the cells: a block 24, 32 or 44px tall and at least as wide, a square 10, 14 or 24px wide, with the headings and values one text size smaller.",
+    "title": "Sizes"
+  },
+  "sizes": {
+    "corner": "Service",
+    "label": "5xx responses per service, by hour",
+    "value": "5xx responses"
+  },
+  "variance": {
+    "about": "scale=\"diverging\" colors a deviation from the midpoint, orange under it and blue over it, with one reach on both sides: security's 11 over plan sets the reach, so payments' 9 under is a step short of the whole orange. valueOptions writes the sign.",
+    "caption": "Payments ran 9 under plan in Q2, and security ended the year 11 over.",
+    "corner": "Team",
+    "label": "Headcount against plan per team, by quarter",
+    "title": "Diverging scale",
+    "value": "Against plan"
+  },
+  "wards": {
+    "about": "The oncology feed was down all week, and nobody counted paediatrics on Wednesday. Those six cells have no fill and a dashed edge, and read \"Not counted\", while the fewest beds counted, 8, keep a tint.",
+    "caption": "Six readings are missing: oncology's whole week and paediatrics on Wednesday.",
+    "corner": "Ward",
+    "days": {
+      "fri": "Fri 18",
+      "mon": "Mon 14",
+      "thu": "Thu 17",
+      "tue": "Tue 15",
+      "wed": "Wed 16"
+    },
+    "label": "Beds occupied per ward, by day",
+    "missing": "Not counted",
+    "title": "Missing readings",
+    "value": "Beds occupied"
+  },
+  "title": "Heatmap"
+}

package/locales/en/specimen/histogram-chart.json

@@ -0,0 +1,48 @@
+{
+  "about": "The shape of one distribution: its values counted into bins that touch along a numeric axis. The ticks are the bin edges, and the tooltip heads each bar with its range.",
+  "clipped": {
+    "about": "domain bins a range from its lower edge and leaves out the values outside it, so the bins narrow to the body of the distribution. Here the bins are 5ms wide.",
+    "caption": "In bins 5ms wide, the peak is at 30 to 40ms. The 5 requests over 150ms are left out.",
+    "title": "Clipped range"
+  },
+  "coarse": {
+    "about": "bins aims for a number of bins, and the width snaps to a round number. Six bins of 100ms put 131 of 140 requests in the first bin, and the shape of the body is gone.",
+    "caption": "In bins 100ms wide, 131 of 140 requests fall in the first bin.",
+    "title": "Fewer bins"
+  },
+  "latency": {
+    "about": "The response times of 140 requests in bins 20ms wide, Freedman–Diaconis' count snapped to a round width. The values are raw numbers, not rows, and valueOptions writes the edges in milliseconds.",
+    "caption": "107 of 140 requests finish under 60ms, and a slow tail runs to 460ms.",
+    "label": "Response times of the checkout API",
+    "title": "Response times"
+  },
+  "narrow": {
+    "about": "The response times in a room 20rem wide, the column of a phone. The labels keep their even step of 100ms.",
+    "title": "Narrow room"
+  },
+  "orders": {
+    "about": "Sixty order values in euros, the bars in the teal palette's chart color. countLabel names the counts in the tooltip.",
+    "caption": "Two in three orders come to less than €60, and six pass €100.",
+    "label": "Order values this week",
+    "orders": "Orders",
+    "title": "Order values"
+  },
+  "peak": {
+    "about": "defaultIndex opens the tooltip at a bin when the chart first renders. The heading is the bin's range and the row its count.",
+    "caption": "54 of 140 requests take 20 to 40ms, the tallest bin.",
+    "title": "Tooltip"
+  },
+  "quiet": {
+    "about": "A histogram without a finite value renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Response times of the checkout API this hour.",
+    "empty": "No requests this hour.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each bar from the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the bars at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "requests": "Requests",
+  "title": "Histogram"
+}

package/locales/en/specimen/horizontal-bar-chart.json

@@ -0,0 +1,54 @@
+{
+  "about": "Bars on their side with the categories down the start edge, for long names or a ranking. The chart renders the rows in the order it is given.",
+  "bullet": {
+    "about": "Plan attainment per team as bullet graphs. zones fills each row with the axis' zones, tinted, behind a measure 42% of the row, and a series with target marks each team's plan with a tick. valueDomain fixes the scale at 0 to 120%, which every row shares. The tooltip writes the value, the plan and the zone, and the key under the plot names the tick and the zones.",
+    "atlas": "Atlas",
+    "behind": "Behind",
+    "borealis": "Borealis",
+    "caption": "Two of six teams passed their plan, and Borealis is behind at 64%.",
+    "close": "Close",
+    "cygnus": "Cygnus",
+    "done": "Attainment",
+    "draco": "Draco",
+    "eridanus": "Eridanus",
+    "fornax": "Fornax",
+    "label": "Plan attainment per team",
+    "on": "On plan",
+    "target": "Plan",
+    "title": "Bullet graph"
+  },
+  "countries": {
+    "about": "Sessions per country, sorted from the most, in the indigo palette. The category axis measures its widest name.",
+    "br": "Brazil",
+    "caption": "The United States brought in 41% of the 118K sessions.",
+    "de": "Germany",
+    "gb": "United Kingdom",
+    "in": "India",
+    "label": "Sessions per country",
+    "nl": "Netherlands",
+    "sessions": "Sessions",
+    "title": "Ranking",
+    "us": "United States"
+  },
+  "leader": {
+    "about": "defaultIndex opens the tooltip at the first row when the chart first renders. The pointer or the arrow keys move it from there.",
+    "caption": "The United States brought 48.2K sessions, more than the United Kingdom and Germany together.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The ranking in a room 20rem wide, the column of a phone. The category axis names every bar and measures its widest name, United Kingdom.",
+    "title": "Narrow room"
+  },
+  "replay": {
+    "about": "animate grows each bar out from the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the bars at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "title": "Horizontal bar chart",
+  "unvisited": {
+    "about": "A week without sessions renders the empty state in the plot's place.",
+    "caption": "Sessions per country this week.",
+    "empty": "No sessions from any country this week.",
+    "title": "Empty"
+  }
+}

package/locales/en/specimen/line-chart.json

@@ -0,0 +1,106 @@
+{
+  "about": "A line per declared series over a category or time axis, inside the chart's figure with its tooltip, legend and caption. Lines suit a rate or a level that exists between its points.",
+  "anomalies": {
+    "about": "An annotation with a value rings the point at its category and value, here in the error and warning palettes. The ring has no fill, so the series' own point shows through it, and its words are written above it.",
+    "caption": "Orders fell to 312 on September 18, when the card processor was down.",
+    "duplicates": "Duplicate webhooks",
+    "label": "Orders per day",
+    "orders": "Orders",
+    "outage": "Processor outage",
+    "title": "Flagged points"
+  },
+  "budget": {
+    "about": "A ReferenceLine child marks a constant, here the daily budget, and Chart.colorOf gives it the error palette's chart color. The recipe sets the line's label in the chart's muted ink.",
+    "budget": "Budget",
+    "caption": "Spend passed the €1,200 daily budget on Tuesday and Wednesday.",
+    "label": "Cloud spend per day",
+    "spend": "Spend",
+    "title": "Reference line"
+  },
+  "comparison": {
+    "about": "alignPeriods lines last week up with this week by position, Monday against Monday, and a series with previousOf renders last week dashed in the neutral palette. The tooltip writes the change from last week after this week's value.",
+    "caption": "Revenue this week was €141,400, 6.1% more than last week's €133,300.",
+    "current": "This week",
+    "previous": "Last week",
+    "title": "Comparison",
+    "weeks": "Weeks"
+  },
+  "controlled": {
+    "about": "hiddenKeys and onHiddenKeysChange keep the hidden series in the caller's state, which starts with p50 hidden. The status line reads that state, and Show all empties it.",
+    "all": "Show all",
+    "shown_one": "{{count}} of 3 series shown",
+    "shown_other": "{{count}} of 3 series shown",
+    "title": "Controlled legend"
+  },
+  "guide": {
+    "about": "Chart.Crosshair, a child of the chart, runs a dashed guide across the plot at the active row's p95 value. recharts' cursor marks the row, and the guide moves with the tooltip under the pointer and the arrow keys.",
+    "title": "Crosshair"
+  },
+  "latency": {
+    "about": "Two percentiles and a dashed target over a day's hours, with straight lines between the points and the legend below.",
+    "caption": "p95 latency passed the 300ms target between 12:00 and 14:00.",
+    "label": "Latency per hour",
+    "p50": "p50 latency",
+    "p95": "p95 latency",
+    "target": "Target",
+    "title": "Several series"
+  },
+  "narrow": {
+    "about": "The revenue chart in a room 20rem wide, the column of a phone. All seven weekday ticks fit, and the value axis measures its widest tick, €28,000.",
+    "title": "Narrow room"
+  },
+  "peak": {
+    "about": "defaultIndex opens the tooltip at a row when the chart first renders, here the hour of the peak. The pointer or the arrow keys move it from there.",
+    "caption": "p95 latency peaked at 390ms at 13:00.",
+    "title": "Tooltip"
+  },
+  "quiet": {
+    "about": "A range without rows renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Errors per day over the last 7 days.",
+    "empty": "No errors in the last 7 days.",
+    "errors": "Errors",
+    "label": "Errors per day",
+    "title": "Empty"
+  },
+  "releases": {
+    "about": "annotations marks the chart's categories. An annotation with at alone is a moment, a dashed rule across the plot, and one with until is a period, a wash from at to until. The words are written at the plot's top, and the tooltip lists the annotations at its row after the series.",
+    "caption": "p95 latency rose above 360ms after release 4.12 and fell to 214ms after release 4.13.",
+    "first": "Release 4.12",
+    "freeze": "Change freeze",
+    "label": "p95 latency per day",
+    "p95": "p95 latency",
+    "second": "Release 4.13",
+    "title": "Annotations"
+  },
+  "replay": {
+    "about": "animate reveals each line from the start of the axis to its end when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the lines at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "retention": {
+    "about": "retentionSeries lays weekly trial cohorts out as lines: a line per cohort in one color, each newer cohort mixed further towards the ink, and the average weighted by each cohort's size in the ink. The average turns dashed where fewer than three cohorts have a rate for the week, because there it is the average of the oldest few.",
+    "average": "All cohorts",
+    "caption": "Trials from week 6 on kept 59 to 65% after a week, against 47 to 53% before the new activation email.",
+    "cohort": "Week {{week}}",
+    "label": "Share of trials still active, by week since the trial started",
+    "period": "W{{week}}",
+    "sparse": "All cohorts, fewer than three",
+    "title": "Retention by cohort"
+  },
+  "revenue": {
+    "about": "One series of daily revenue in euros. A chart of one series renders no legend.",
+    "caption": "Revenue peaked at €26,300 on Friday and fell over the weekend.",
+    "label": "Revenue per day",
+    "revenue": "Revenue",
+    "title": "One series"
+  },
+  "series": "Series",
+  "title": "Line chart",
+  "uptime": {
+    "about": "valueDomain sets the value axis to run from 99% to 100%, where an axis from zero would flatten every day into one line.",
+    "availability": "Availability",
+    "caption": "Availability fell to 99.71% on September 24 and was 99.9% or more on every other day.",
+    "label": "Availability per day",
+    "title": "Value domain"
+  }
+}

package/locales/en/specimen/pareto-chart.json

@@ -0,0 +1,43 @@
+{
+  "about": "Categories as bars sorted largest first, and the running share of the total as a line on an end axis from 0 to 100%. A dashed line marks the share that matters, 80% unless stated.",
+  "cumulative": "Cumulative share",
+  "defects": {
+    "about": "threshold moves the dashed line to 90%, and thresholdLabel writes its name on it. paretoCutoff counts the causes that add up to the threshold, and the caption states the count.",
+    "caption_one": "{{count}} of {{total}} causes accounts for 90% of defects.",
+    "caption_other": "{{count}} of {{total}} causes account for 90% of defects.",
+    "defects": "Defects",
+    "label": "Defects per cause",
+    "threshold": "90% of defects",
+    "title": "Threshold"
+  },
+  "largest": {
+    "about": "defaultIndex opens the tooltip at the second bar when the chart first renders. The tooltip writes the bar's count and the running share after it.",
+    "caption": "Login and billing account for 70% of support tickets.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The tickets chart in a room 20rem wide, the column of a phone. The category axis names the bars it has room for.",
+    "title": "Narrow room"
+  },
+  "quiet": {
+    "about": "A range without rows renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Support tickets per reason this month.",
+    "empty": "No tickets this month.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each bar from its base and reveals the running share from the start of the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the marks at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "series": "Series",
+  "tickets": {
+    "about": "Support tickets per reason, passed in no order and sorted by the chart. paretoRows and paretoCutoff return the numbers the chart plots, so the caption states the count the chart shows.",
+    "caption_one": "{{count}} of {{total}} reasons accounts for 80% of support tickets.",
+    "caption_other": "{{count}} of {{total}} reasons account for 80% of support tickets.",
+    "label": "Support tickets per reason",
+    "tickets": "Tickets",
+    "title": "Tickets"
+  },
+  "title": "Pareto chart"
+}

package/locales/en/specimen/percent-stacked-bar.json

@@ -0,0 +1,37 @@
+{
+  "about": "Each category as one bar of 100%, split into the declared series' shares. The bars compare composition, and the caption states the totals.",
+  "mix": {
+    "about": "Customers per plan in each region as shares. The value axis reads in percent, and the tooltip writes each plan's own count.",
+    "americas": "Americas",
+    "apac": "APAC",
+    "caption": "Scale plans are 13% of the Americas' 1,300 customers, 10% of APAC's 300 and 9% of EMEA's 800.",
+    "emea": "EMEA",
+    "growth": "Growth",
+    "label": "Customers per plan per region",
+    "scale": "Scale",
+    "starter": "Starter",
+    "title": "Plan mix"
+  },
+  "narrow": {
+    "about": "The plan mix in a room 20rem wide, the column of a phone. The three bars keep their shares, and the region names fit below them.",
+    "title": "Narrow room"
+  },
+  "region": {
+    "about": "defaultIndex opens the tooltip at the Americas when the chart first renders. The bar shows shares, and the tooltip writes each plan's own count.",
+    "caption": "The Americas had 610 Starter, 520 Growth and 170 Scale customers.",
+    "title": "Tooltip"
+  },
+  "replay": {
+    "about": "animate grows each segment from its base when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the bars at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "series": "Plans",
+  "title": "Percent stacked bar",
+  "unsold": {
+    "about": "A chart without rows renders the empty state in the plot's place, and no legend.",
+    "caption": "Customers per plan per region.",
+    "empty": "No customers in any region yet.",
+    "title": "Empty"
+  }
+}