@stealthscale/component-charts 0.2.2 → 0.2.3

package/dist/theme.js

@@ -1,4 +1,4 @@
-import { E as recipe$1, t as recipe, u as recipe$2 } from "./recipe-BbGw00ut.js";
+import { E as recipe$1, t as recipe, u as recipe$2 } from "./recipes-BbGw00ut.js";
 import { definePreset } from "@stealthscale/theme/authoring";
 //#endregion
 const theme_default$published = ((preset) => {

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

@@ -0,0 +1,56 @@
+{
+  "about": "A filled area per declared series over a category or time axis. The fill states that the amount under the line means something, such as a volume.",
+  "bandwidth": {
+    "about": "Inbound and outbound traffic over a day. Each area fades from its line to transparent at the axis, so each shows through the other.",
+    "caption": "Inbound traffic peaked at 310 Mb/s at 09:00. Outbound peaked three hours later.",
+    "inbound": "Inbound",
+    "label": "Bandwidth per hour",
+    "outbound": "Outbound",
+    "title": "Overlapping areas"
+  },
+  "busiest": {
+    "about": "defaultIndex opens the tooltip at the busiest hour when the chart first renders. The pointer or the arrow keys move it from there.",
+    "caption": "At 09:00 inbound traffic was 310 Mb/s and outbound 140 Mb/s.",
+    "title": "Tooltip"
+  },
+  "internal": {
+    "about": "defaultHiddenKeys hides replication traffic on the first render. Its name is struck through in the legend, and a press on it shows the area.",
+    "caption": "Replication between regions was under 60 Mb/s all day.",
+    "replication": "Replication",
+    "title": "Hidden series"
+  },
+  "narrow": {
+    "about": "The traffic in a room 20rem wide, the column of a phone. recharts shows every second time tick, so no two labels overlap.",
+    "title": "Narrow room"
+  },
+  "offline": {
+    "about": "A day without readings renders the empty state in the plot's place, and no legend.",
+    "caption": "Bandwidth per hour today.",
+    "empty": "No traffic recorded today.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate reveals each area 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 areas at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "series": "Directions",
+  "storage": {
+    "about": "One series of storage in use at the start of each month, in the teal palette.",
+    "caption": "Storage in use grew by 330 GB since April, to 742 GB.",
+    "label": "Storage in use per month",
+    "title": "One area",
+    "used": "In use"
+  },
+  "title": "Area chart",
+  "zoom": {
+    "about": "A range Slider from the forms package picks the days the chart plots out of a year of rows. Each thumb is named, writes its date as its value text, and moves with the arrow keys, Page Up, Page Down, Home and End.",
+    "caption": "Weekday visitors grew from 3,900 to 6,448 over the year. They passed 10,500 in the launch week from August 27.",
+    "from": "From",
+    "label": "Visitors per day",
+    "range": "Days shown",
+    "title": "Zoom",
+    "to": "To",
+    "visitors": "Visitors"
+  }
+}

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

@@ -0,0 +1,56 @@
+{
+  "about": "A bar per declared series side by side in each category. A bar is read by its length, so the value axis starts at zero.",
+  "crossover": {
+    "about": "defaultIndex opens the tooltip at September when the chart first renders, with the band behind the month. The pointer or the arrow keys move it from there.",
+    "caption": "In September Growth brought 158 sign-ups, Starter 152 and Scale 31.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The sign-ups in a room 20rem wide, the column of a phone. Each month keeps its three bars, narrower, and all six month ticks fit.",
+    "title": "Narrow room"
+  },
+  "prelaunch": {
+    "about": "A range without rows renders the empty state in the plot's place, and no legend.",
+    "caption": "Sign-ups per plan per month.",
+    "empty": "No sign-ups in this period.",
+    "title": "Empty"
+  },
+  "refunds": {
+    "about": "grid={false} leaves out the grid lines, for a chart of a few bars whose ticks and tooltip give the values.",
+    "caption": "Refund requests peaked at 23 on Thursday and fell to 4 by Sunday.",
+    "label": "Refund requests per day",
+    "requests": "Requests",
+    "title": "Without grid"
+  },
+  "replay": {
+    "about": "animate grows each bar up 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"
+  },
+  "series": "Plans",
+  "signups": {
+    "about": "Sign-ups per plan per month, three bars in each month, with the band under the pointer.",
+    "caption": "Growth sign-ups passed Starter in September, 158 to 152.",
+    "growth": "Growth",
+    "label": "Sign-ups per plan per month",
+    "scale": "Scale",
+    "starter": "Starter",
+    "title": "Grouped bars"
+  },
+  "targets": {
+    "about": "A series with target reads each month's target from the row's target field and marks it with a tick across the month's bar, in the ink with an edge in the panel's color. The tooltip writes the target after the value, and the key under the plot names the tick.",
+    "caption": "Sign-ups passed the month's target in four of six months and fell short in May and August.",
+    "label": "Sign-ups per month against the month's target",
+    "signups": "Sign-ups",
+    "target": "Target",
+    "title": "Against targets"
+  },
+  "title": "Bar chart",
+  "weekly": {
+    "about": "ratio=\"wide\" gives the plot the theme's wide ratio, for twelve weeks in a strip across a dashboard.",
+    "caption": "Weekly sign-ups rose from 212 in the week of July 6 to 334 in the week of September 21.",
+    "label": "Sign-ups per week",
+    "signups": "Sign-ups",
+    "title": "Wide ratio"
+  }
+}

package/locales/en/specimen/box-plot.json

@@ -0,0 +1,65 @@
+{
+  "about": "The distribution of each group as its median, its middle half, its whiskers and its outliers, side by side. A key under the plot names the parts, and the tooltip writes a group's five numbers.",
+  "far": {
+    "about": "whisker 3 counts a value as an outlier only past 3 interquartile ranges from the box, the convention for far-out values. Frankfurt's 158 and 176ms join its whisker.",
+    "caption": "At 3 interquartile ranges, 5 requests remain outliers, 3 of them in Virginia.",
+    "title": "Far out"
+  },
+  "narrow": {
+    "about": "The four regions in a room 20rem wide, the column of a phone. Each box takes its share of the width, at most 72px.",
+    "title": "Narrow room"
+  },
+  "quiet": {
+    "about": "A box plot whose groups have no finite value renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Response times of the checkout API by region this hour.",
+    "empty": "No requests this hour.",
+    "title": "Empty"
+  },
+  "regions": {
+    "about": "The response times of about 40 requests in each of four regions. Each whisker extends to the furthest request within 1.5 interquartile ranges of its box, and a request past it renders as a point. valueOptions writes the values in milliseconds.",
+    "amsterdam": "Amsterdam",
+    "caption": "Singapore's median of 165ms is more than twice Frankfurt's 61ms, and every region has requests past its upper whisker.",
+    "frankfurt": "Frankfurt",
+    "label": "Response times of the checkout API by region",
+    "singapore": "Singapore",
+    "title": "Response times",
+    "virginia": "Virginia"
+  },
+  "replay": {
+    "about": "animate grows each box from the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the boxes at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "requests": "Requests",
+  "shipping": {
+    "about": "Delivery times in days for three shipping methods, the boxes in the teal palette's chart color. valueDomain fixes the axis at 0 to 12 days, so the chart of every week compares on one scale. This week's slowest order took 7.5 days, and the rounded axis would end at 8.",
+    "caption": "Express orders arrive in 1.5 days at the median, twice as fast as Standard.",
+    "economy": "Economy",
+    "express": "Express",
+    "label": "Delivery times by shipping method",
+    "orders": "Orders",
+    "standard": "Standard",
+    "title": "Delivery times"
+  },
+  "slowest": {
+    "about": "defaultIndex opens the tooltip at a group when the chart first renders. The heading is the group's name, and the rows are its median, middle half, whiskers, outliers and count.",
+    "caption": "Half of Singapore's requests take 141 to 199ms, and the slowest takes 388ms.",
+    "title": "Tooltip"
+  },
+  "tile": {
+    "about": "outliers false leaves out the points and legend false leaves out the key, for a tile on a page that explains the parts once. The tooltip still counts the outliers.",
+    "caption": "Singapore is the slowest region, and Frankfurt the fastest.",
+    "title": "Without points or key"
+  },
+  "title": "Box plot",
+  "warehouse": {
+    "about": "Each group passes the summary a warehouse query returned for a month of page loads, in place of millions of values. The chart's quartiles are type 7, the rule of SQL's PERCENTILE_CONT, so the query and the chart agree. The query returns the slowest loads as the outliers.",
+    "caption": "Half of all mobile loads paint after 2.4s, twice the desktop median.",
+    "desktop": "Desktop",
+    "label": "Largest contentful paint by device",
+    "loads": "Page loads",
+    "mobile": "Mobile",
+    "tablet": "Tablet",
+    "title": "Summaries from a query"
+  }
+}

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

@@ -0,0 +1,47 @@
+{
+  "about": "A scatter whose points also show a third measure as their area. Recharts scales the area, not the radius, so a point twice the value is twice the ink. Readers judge area roughly, so the tooltip writes the value.",
+  "accounts": {
+    "about": "Seats against weekly active seats, each account sized by its annual recurring revenue. Each series lists its points largest first, so the small ones render on top.",
+    "active": "Weekly active",
+    "arr": "ARR",
+    "business": "Business",
+    "caption": "Business accounts use fewer of their seats: weekly activity falls to 43% at 200 seats, against 58% or more on every Team account.",
+    "label": "Weekly active seats by account size",
+    "seats": "Seats",
+    "team": "Team",
+    "title": "Two series"
+  },
+  "features": {
+    "about": "One series of features: adoption across accounts against the rating users give, each feature sized by its weekly users. yDomain runs the rating axis from 1 to 5, the scale the rating uses.",
+    "adoption": "Adoption",
+    "caption": "The best-rated feature, at 4.6, is adopted by only 29% of accounts.",
+    "features": "Features",
+    "label": "Rating by adoption per feature",
+    "rating": "Rating",
+    "title": "One series",
+    "users": "Weekly users"
+  },
+  "largest": {
+    "about": "defaultIndex opens the tooltip at the largest account when the chart first renders. The tooltip writes the size's value beside the two axes' values.",
+    "caption": "The largest account, €216K a year, uses 66% of its 240 seats weekly.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The accounts in a room 20rem wide, the column of a phone. The points keep their areas, so they crowd more than on a wide plot.",
+    "title": "Narrow room"
+  },
+  "plans": "Plans",
+  "quiet": {
+    "about": "A chart without points renders the empty state in the plot's place, at the plot's ratio.",
+    "accounts": "Accounts",
+    "caption": "Weekly active seats by account size.",
+    "empty": "No accounts yet.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each point from its centre when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the points at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "title": "Bubble chart"
+}

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

@@ -0,0 +1,46 @@
+{
+  "about": "The work left per period against a straight ideal line, and the trend projected past the last reading. burndownFinish returns the period the projection falls to zero, which the caption states.",
+  "ahead": {
+    "about": "A sprint burning faster than the ideal line. The projection falls to zero before the sprint ends, and the chart plots it at zero after that.",
+    "label": "Checkout sprint burndown",
+    "title": "Ahead of plan"
+  },
+  "finish": "At the current rate the work runs out on day {{day}} of a {{days}}-day sprint.",
+  "ideal": "Ideal",
+  "narrow": {
+    "about": "The sprint in a room 20rem wide, the column of a phone.",
+    "title": "Narrow room"
+  },
+  "projected": "Projected",
+  "quiet": {
+    "about": "A sprint without periods renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Remaining story points per day.",
+    "empty": "The sprint has not started.",
+    "title": "Empty"
+  },
+  "remaining": "Remaining",
+  "replay": {
+    "about": "animate reveals each line from the start of the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the lines at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "scope": {
+    "about": "Work added mid-sprint turns the trend upward. A trend that does not fall has no finish, so the chart renders no projection and burndownFinish returns nothing.",
+    "caption": "8 points joined the sprint on September 16, so the remaining work is not falling and no finish is projected.",
+    "label": "Billing sprint burndown",
+    "title": "Scope added"
+  },
+  "series": "Series",
+  "sprint": {
+    "about": "Story points left at the end of each working day, read on the first seven. The ideal line runs from 60 to zero over the ten days, and the projection continues the trend from the last reading.",
+    "label": "Search sprint burndown",
+    "title": "Behind plan"
+  },
+  "stalled": "The remaining work is not falling, so no finish is projected.",
+  "title": "Burndown chart",
+  "today": {
+    "about": "defaultIndex opens the tooltip at the last reading when the chart first renders. The tooltip writes each line's value that day.",
+    "caption": "On September 22, 36 points remained against an ideal of 20.",
+    "title": "Tooltip"
+  }
+}

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

@@ -0,0 +1,42 @@
+{
+  "about": "Each period's open, high, low and close as a body inside a wick, colored by whether the period closed above or below its open. The periods are spaced evenly, and the value axis leaves out zero.",
+  "busiest": {
+    "about": "defaultIndex opens the tooltip at a day when the chart first renders. The rows are the open, the high, the low, the close and the change with its sign and percentage.",
+    "caption": "ACME's largest day was September 25: it opened at $172.08 and closed 4.6% higher at $180.02.",
+    "title": "Tooltip"
+  },
+  "daily": {
+    "about": "The 22 trading days of September for one share. The body runs from the open to the close and the wick from the low to the high. A day that closed above its open takes the success palette's chart color, one that closed below it the error's. The weekends take no room, because the category axis is ordinal. labelOptions writes the days and valueOptions the dollars.",
+    "caption": "ACME rose 12.7% over September, from $156.22 to $176.03.",
+    "label": "Daily prices of ACME",
+    "title": "Daily prices"
+  },
+  "narrow": {
+    "about": "The month in a room 20rem wide, the column of a phone. Each candle takes its share of the width, at most 28px.",
+    "title": "Narrow room"
+  },
+  "opening": {
+    "about": "children renders recharts elements in the chart, here a dashed line at the month's opening price in the neutral palette's chart color.",
+    "caption": "ACME closed every day from September 3 above its September open of $156.22.",
+    "open": "September open",
+    "title": "Reference line"
+  },
+  "pair": {
+    "about": "A currency pair written to four decimals through valueOptions. The value axis steps by 1, 2, 2.5 or 5 times a power of ten around the rates and leaves zero out, because a rate is read for its movement. A day that closed at its open takes the neutral palette's chart color, and the key then names it.",
+    "caption": "The euro gained 1.3% on the dollar over September and closed September 14 where it opened.",
+    "label": "Daily rates of the euro in dollars",
+    "title": "Currency pair"
+  },
+  "quiet": {
+    "about": "A candlestick chart without a row that has four finite prices renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Daily prices of ACME this week.",
+    "empty": "The market is closed this week.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each candle from the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the candles at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "title": "Candlestick chart"
+}

package/locales/en/specimen/chart.json

@@ -0,0 +1,53 @@
+{
+  "about": "A figure around a recharts chart, with a tooltip, a legend that shows and hides series, a caption that states the finding, and an empty state. Each series takes its color from a hue or a palette of the theme.",
+  "latency": {
+    "about": "Hourly p95 latency against a 300ms target, which takes the error palette and a dashed line.",
+    "caption": "Latency passed the 300ms target between 12:00 and 14:00.",
+    "name": "p95 latency per hour",
+    "p95": "p95 latency",
+    "target": "Target",
+    "title": "Threshold"
+  },
+  "payouts": {
+    "about": "Paid and refunded payouts per day in euros. The ticks and the tooltip are written in the locale, and a press in the legend hides or shows a series.",
+    "caption": "Refunds rose to €1,250 on Thursday, a fifth of the day's payouts.",
+    "name": "Payouts per day",
+    "paid": "Paid",
+    "refunded": "Refunded",
+    "title": "Line"
+  },
+  "quiet": {
+    "about": "A chart without rows shows its empty state in the plot's place, at the plot's ratio.",
+    "caption": "Disputes per day over the last 7 days.",
+    "disputes": "Disputes",
+    "empty": "No disputes in the last 7 days.",
+    "name": "Disputes per day",
+    "title": "Empty"
+  },
+  "ratio": {
+    "about": "The plot's aspect ratio from the theme's scale, which gives recharts a height to measure.",
+    "title": "Ratios"
+  },
+  "series": "Series",
+  "signups": {
+    "about": "Sign-ups per plan per month as stacked bars, each plan in the hue its series states.",
+    "caption": "Sign-ups grew every month. The Growth plan took 38% of September's.",
+    "growth": "Growth",
+    "name": "Sign-ups per plan",
+    "scale": "Scale",
+    "starter": "Starter",
+    "title": "Stacked bars"
+  },
+  "storage": {
+    "about": "Storage per kind of file as a donut. Each sector is a series, so the legend shows and hides sectors.",
+    "archives": "Archives",
+    "caption": "Video takes 60% of the 195.5 GB in use.",
+    "documents": "Documents",
+    "images": "Images",
+    "legend": "Kinds of file",
+    "name": "Storage per kind of file",
+    "title": "Donut",
+    "video": "Video"
+  },
+  "title": "Chart"
+}

package/locales/en/specimen/chord-diagram.json

@@ -0,0 +1,69 @@
+{
+  "about": "Flows between peers around a circle, such as calls between services. Each node is an arc as long as what it sends, and each pair of nodes is one ribbon whose two ends are as wide as the two directions. A ribbon takes the color of the node that sends more. The readout in the middle of the ring writes what an arc's node sends and receives, and both directions of a ribbon. The arrow keys walk each arc, then the ribbons that start on it. A chord diagram shows the flows a sankey leaves out: flows both ways and flows around a loop.",
+  "audit": {
+    "about": "Three services write to an audit log that calls nobody. An arc is as long as what its node sends, so the audit log's arc has no length and its ribbons end in points. defaultIndex opens the readout at its arc, the last mark of the walk, which writes the calls it receives.",
+    "caption": "The {{name}} log receives {{received, number}} calls and sends none.",
+    "label": "Calls between services and the audit log",
+    "title": "A node that only receives"
+  },
+  "in": "Received",
+  "internal": {
+    "about": "jobs requeues its own work, a flow from a node to itself. The chart renders it as a ribbon from the jobs arc back to itself, and the readout writes it as jobs → jobs.",
+    "caption": "{{name}} calls itself {{calls, number}} times, more than it calls any other service.",
+    "label": "Calls between services, calls to itself included",
+    "title": "A flow to itself"
+  },
+  "layout": {
+    "about": "chordLayout returns the arcs and the ribbons the chart renders, in radians from 12 o'clock. The caption reads the first arc's share of all the arcs from it, which is its service's share of every call sent.",
+    "caption": "The {{name}} arc is {{share}} of the ring's arcs, its share of every call sent.",
+    "title": "The exported layout"
+  },
+  "migration": {
+    "about": "A decade of moves between four regions. Every pair moves both ways, and each ribbon takes the color of the region that sends more, so the ribbons into North are in the colors of South and East. inflowLabel and outflowLabel name the readout's rows.",
+    "caption": "{{name}} gained {{gained, number}} people over the decade.",
+    "in": "Arrived",
+    "label": "Moves between regions over the decade",
+    "out": "Left",
+    "title": "The color is the net direction"
+  },
+  "names": {
+    "api": "api",
+    "audit": "audit",
+    "auth": "auth",
+    "billing": "billing",
+    "east": "East",
+    "jobs": "jobs",
+    "north": "North",
+    "search": "search",
+    "south": "South",
+    "west": "West"
+  },
+  "narrow": {
+    "about": "The calls in a room 20rem wide, the column of a phone. The ring shrinks, and a name that would leave the plot or meet an earlier name is hidden, while the readout still names its arc.",
+    "title": "Narrow room"
+  },
+  "out": "Sent",
+  "pair": {
+    "about": "defaultIndex opens the readout at the second mark of the walk, the ribbon between api and auth, when the chart first renders. The ribbon lifts, the other marks fade, and the readout in the middle of the ring writes both directions of the pair.",
+    "caption": "api calls auth {{there, number}} times, and auth calls api {{back, number}} times.",
+    "title": "Readout"
+  },
+  "palette": {
+    "about": "Each service states its palette: api teal, auth purple, billing orange, search pink. jobs takes the next series color, and each ribbon takes the color of the service that sends more.",
+    "caption": "Six pairs of services call each other, all of them both ways.",
+    "title": "Palettes"
+  },
+  "quiet": {
+    "about": "A chord diagram without flows renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Calls between services in the last hour.",
+    "empty": "No calls in this hour.",
+    "title": "Empty"
+  },
+  "services": {
+    "about": "An hour of calls between five services. Every pair that calls calls both ways, which a sankey leaves out as loops. Each arc is as long as the calls its service sends, and each ribbon is wider at the service that sends more. flowBalance returns each service's calls sent and received, and the caption names the service that sends the most.",
+    "caption": "{{name}} sends the most calls, {{sent, number}}, and receives {{received, number}}.",
+    "label": "Calls between services in the last hour",
+    "title": "Calls between services"
+  },
+  "title": "Chord diagram"
+}

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

@@ -0,0 +1,41 @@
+{
+  "about": "Bars, lines and areas on one plot, each series in the mark it states. A series in another unit reads a second value axis at the plot's end edge, which renders while a series asks for it.",
+  "narrow": {
+    "about": "The revenue and margin chart in a room 20rem wide, the column of a phone. Both value axes measure their widest tick.",
+    "title": "Narrow room"
+  },
+  "orders": {
+    "about": "Daily orders as bars and their 7-day average as a line, both on one value axis because they share a unit. The average starts on the seventh day, the first with a full week behind it.",
+    "average": "7-day average",
+    "caption": "Orders dip every weekend. The 7-day average rose from 402 to 414 orders a day.",
+    "label": "Orders per day",
+    "orders": "Orders",
+    "title": "One value axis"
+  },
+  "peak": {
+    "about": "defaultIndex opens the tooltip at a month when the chart first renders. The tooltip writes the revenue in euros and the margin as a percentage, each with its own axis' options.",
+    "caption": "September's revenue of €254K was the year's highest, at a 62% gross margin.",
+    "title": "Tooltip"
+  },
+  "quiet": {
+    "about": "A range without rows renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Revenue and gross margin per month.",
+    "empty": "No revenue booked yet this year.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each bar from its base and reveals the line 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"
+  },
+  "revenue": {
+    "about": "Monthly revenue in euros as bars on the start axis, and gross margin as a line on an end axis from 0 to 100%. axis=\"end\" puts a series on the end axis, and endOptions writes its ticks.",
+    "caption": "Revenue rose from €182K in January to €254K in September. Gross margin fell to 55% in June and recovered to 62%.",
+    "label": "Revenue and gross margin per month",
+    "margin": "Gross margin",
+    "revenue": "Revenue",
+    "title": "Two value axes"
+  },
+  "series": "Series",
+  "title": "Combo chart"
+}

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

@@ -0,0 +1,47 @@
+{
+  "about": "Two or more distributions on one set of bins chosen from every series' values together, with each series' bar beside the others in every bin. normalize compares series of different sizes as shares.",
+  "busiest": {
+    "about": "defaultIndex opens the tooltip at a bin when the chart first renders. The heading is the bin's range, and each row is a series' count.",
+    "caption": "22 North deliveries and 2 South deliveries took 2 to 2.5 days.",
+    "title": "Tooltip"
+  },
+  "hidden": {
+    "about": "defaultHiddenKeys hides South when the chart first renders, and North's bars take each bin's whole width. A press on South in the legend shows it again.",
+    "caption": "Most of North's deliveries arrive within 3 days.",
+    "title": "Hidden series"
+  },
+  "narrow": {
+    "about": "The two regions in a room 20rem wide, the column of a phone.",
+    "title": "Narrow room"
+  },
+  "quiet": {
+    "about": "A distribution chart whose series have no finite value renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Delivery times this week.",
+    "empty": "No deliveries this week.",
+    "title": "Empty"
+  },
+  "regions": {
+    "about": "Delivery times in two regions, counted together into half-day bins, so the bars of North and South start at the same edges. The legend hides and shows a region.",
+    "caption": "58 of 90 North deliveries arrive within 3 days, against 8 of 70 in South.",
+    "label": "Delivery times by region",
+    "north": "North",
+    "regions": "Regions",
+    "south": "South",
+    "title": "Two regions"
+  },
+  "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"
+  },
+  "sessions": {
+    "about": "normalize counts each bin as a share of its own plan's sessions, so 120 free sessions and 30 paid ones compare, and the value axis reads in percent.",
+    "caption": "Three in four Free sessions end within 10 minutes, against one in ten Pro sessions.",
+    "free": "Free",
+    "label": "Session lengths by plan",
+    "plans": "Plans",
+    "pro": "Pro",
+    "title": "Shares of each series"
+  },
+  "title": "Distribution chart"
+}

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

@@ -0,0 +1,63 @@
+{
+  "about": "The parts of one whole as a ring, largest first from 12 o'clock, with a figure such as the total in the hole. Everything the pie chart does applies.",
+  "incidents": {
+    "about": "maxSlices={4} gathers the three smallest causes into one slice named by otherLabel, and the hole counts every incident.",
+    "capacity": "Capacity",
+    "caption": "Deploys caused 14 of the 35 incidents this quarter, 40%.",
+    "center": "incidents",
+    "certificate": "Certificate",
+    "dependency": "Dependency",
+    "deploy": "Deploy",
+    "dns": "DNS",
+    "label": "Incidents per cause this quarter",
+    "legend": "Causes",
+    "network": "Network",
+    "other": "Other causes",
+    "title": "Long tail"
+  },
+  "largest": {
+    "about": "defaultIndex opens the tooltip at the largest slice when the chart first renders. The pointer or the arrow keys move it from slice to slice.",
+    "caption": "Video's 118 GB are 60% of the storage in use.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The storage in a room 20rem wide, the column of a phone. The ring scales down with the room, and the total is written in the hole.",
+    "title": "Narrow room"
+  },
+  "replay": {
+    "about": "animate grows the ring from 12 o'clock when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the ring at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "share": {
+    "about": "The hole shows the largest share in place of a total. The chart does not compute the figure, so the caller states what it is.",
+    "caption": "Starter has 47% of the 1,300 customers.",
+    "center": "47%",
+    "centerLabel": "on Starter",
+    "growth": "Growth",
+    "label": "Customers per plan",
+    "legend": "Plans",
+    "scale": "Scale",
+    "starter": "Starter",
+    "title": "Largest share in the hole"
+  },
+  "title": "Donut chart",
+  "unused": {
+    "about": "A chart without slices renders the empty state in the plot's place, and no legend or figure in the middle.",
+    "caption": "Storage per kind of file.",
+    "empty": "No files stored yet.",
+    "title": "Empty"
+  },
+  "usage": {
+    "about": "Storage per kind of file with the total in the hole, which the example sums and writes in the page's language.",
+    "archives": "Archives",
+    "caption": "Video takes 60% of the 195.5 GB in use.",
+    "center": "in use",
+    "documents": "Documents",
+    "images": "Images",
+    "label": "Storage per kind of file",
+    "legend": "Kinds of file",
+    "title": "Total in the hole",
+    "video": "Video"
+  }
+}