@stealthscale/component-charts 0.2.2 → 0.2.3

package/locales/en/specimen/sparkline.json

@@ -0,0 +1,70 @@
+{
+  "about": "The shape of a run of values at the size of a word, without axes or a tooltip. The line spans the run's own range, so the figure it belongs to goes beside it.",
+  "builds": {
+    "about": "label names a run shown without a figure, as an image with that name. It takes no tab stop.",
+    "label": "Build time over the last 15 builds, from 4.2 to 3.1 minutes",
+    "title": "Without a figure"
+  },
+  "errors": {
+    "about": "color takes a palette's chart color, here the error palette's for errors per hour.",
+    "help": "+11 in 12 hours",
+    "label": "Errors per hour",
+    "title": "Palette",
+    "value": "14"
+  },
+  "launch": {
+    "about": "area fills under the line with the chart's gradient. The line spans the run's own range, so a fill measures volume only for a run that starts at zero, as a count since launch does.",
+    "help": "+300 this month",
+    "label": "Customers since launch",
+    "title": "Area",
+    "value": "1,240"
+  },
+  "offline": {
+    "about": "A value that is not a finite number leaves a gap in the line, here two readings the sensor missed. A zero in their place would plot a fall that never happened.",
+    "help": "Two readings missed",
+    "label": "Server room",
+    "title": "Missing readings",
+    "value": "21.8 °C"
+  },
+  "replay": {
+    "about": "animate reveals the line from its start when the sparkline mounts, and Replay mounts it again. Under reduced motion recharts renders it at once.",
+    "label": "Customers since launch, from 0 to 1,240",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "revenue": {
+    "about": "The week's revenue as a stat with the run of daily revenue beside it. The sparkline is hidden from assistive technology, because the stat states the figure.",
+    "help": "+12% on last week",
+    "label": "Revenue this week",
+    "title": "Beside a figure",
+    "value": "€48,120"
+  },
+  "services": {
+    "about": "p95 latency per service with the last 24 hours at the small size in each row. Each run spans its own range, so checkout's rise and search's fall read at a glance.",
+    "api": "API",
+    "auth": "Auth",
+    "caption": "p95 latency per service",
+    "checkout": "Checkout",
+    "day": "Last 24 hours",
+    "now": "p95 now",
+    "search": "Search",
+    "service": "Service",
+    "title": "In a table"
+  },
+  "size": {
+    "about": "Three boxes on the grid, four times as wide as they are tall: 64 by 16 pixels at sm, 96 by 24 at md and 128 by 32 at lg.",
+    "title": "Sizes"
+  },
+  "stretch": {
+    "about": "stretch fills the width of the container at the size's height, here a room 24rem wide.",
+    "title": "Stretch"
+  },
+  "target": {
+    "about": "baseline={300} renders a dashed line at the 300 ms target, and the range widens to include it.",
+    "help": "Above the 300 ms target at 13:00 and 14:00",
+    "label": "p95 latency",
+    "title": "Baseline",
+    "value": "190 ms"
+  },
+  "title": "Sparkline"
+}

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

@@ -0,0 +1,44 @@
+{
+  "about": "The declared series stacked into one total over a category or time axis. With percent, every point sums to 100% and the chart shows shares.",
+  "launch": {
+    "about": "defaultIndex opens the tooltip at Thursday when the chart first renders, with a row per source. The pointer or the arrow keys move it from there.",
+    "caption": "Referrals brought 2.6K of Thursday's 11K sessions.",
+    "title": "Tooltip"
+  },
+  "narrow": {
+    "about": "The sessions in a room 20rem wide, the column of a phone. All seven day ticks fit, and the legend keeps its three sources on one line.",
+    "title": "Narrow room"
+  },
+  "replay": {
+    "about": "animate reveals the bands 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 bands at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "series": "Sources",
+  "share": {
+    "about": "Requests per client as shares of each month's total. The value axis reads in percent, and the tooltip writes each client's own count.",
+    "android": "Android",
+    "api": "API",
+    "caption": "The API's share of requests grew from 12% in April to 26% in September.",
+    "ios": "iOS",
+    "label": "Requests per client per month",
+    "title": "Shares",
+    "web": "Web"
+  },
+  "title": "Stacked area chart",
+  "traffic": {
+    "about": "Sessions per source stacked into each day's total, in compact numbers.",
+    "caption": "Referrals rose to 2.6K on Thursday. Sessions fell from 11K on Friday to 5.6K on Sunday.",
+    "direct": "Direct",
+    "label": "Sessions per source per day",
+    "referral": "Referral",
+    "search": "Search",
+    "title": "Totals"
+  },
+  "untracked": {
+    "about": "A week without sessions renders the empty state in the plot's place, and no legend.",
+    "caption": "Sessions per source this week.",
+    "empty": "No sessions tracked this week.",
+    "title": "Empty"
+  }
+}

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

@@ -0,0 +1,34 @@
+{
+  "about": "Each category's total as one bar, split into the declared series. The total and the bottom segment are measured from the axis.",
+  "narrow": {
+    "about": "The revenue in a room 20rem wide, the column of a phone. All six month ticks fit, and the value axis measures its widest tick, €60,000.",
+    "title": "Narrow room"
+  },
+  "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"
+  },
+  "revenue": {
+    "about": "Revenue per plan per month in euros, with the largest plan at the bottom of each bar. A hairline in the panel's color parts the segments.",
+    "caption": "Revenue grew to €43,600 in September, €24,800 of it from Scale plans.",
+    "growth": "Growth",
+    "label": "Revenue per plan per month",
+    "scale": "Scale",
+    "starter": "Starter",
+    "title": "Totals by plan"
+  },
+  "series": "Plans",
+  "split": {
+    "about": "defaultIndex opens the tooltip at September when the chart first renders, with a row per plan. The pointer or the arrow keys move it from there.",
+    "caption": "September's €43,600 split into €24,800 from Scale, €15,800 from Growth and €3,000 from Starter.",
+    "title": "Tooltip"
+  },
+  "title": "Stacked bar chart",
+  "unbooked": {
+    "about": "A range without rows renders the empty state in the plot's place, and no legend.",
+    "caption": "Revenue per plan per month.",
+    "empty": "No revenue booked in this period.",
+    "title": "Empty"
+  }
+}

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

@@ -0,0 +1,33 @@
+{
+  "about": "A line of steps per declared series: each value is flat from its point until the next, as a replica count or a price tier is.",
+  "idle": {
+    "about": "A range without readings renders the empty state in the plot's place, and no legend.",
+    "caption": "Replicas per service over the last hour.",
+    "empty": "No readings in the last hour.",
+    "title": "Empty"
+  },
+  "narrow": {
+    "about": "The replicas in a room 20rem wide, the column of a phone. recharts shows every second time tick, so no two labels overlap.",
+    "title": "Narrow room"
+  },
+  "replay": {
+    "about": "animate reveals each line of steps 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"
+  },
+  "replicas": {
+    "about": "Replicas of two services every 10 minutes. The count is constant between readings, so the lines step instead of sloping.",
+    "api": "API",
+    "caption": "The API went from 3 replicas to 8 by 12:30 and was back at 3 by 13:30.",
+    "label": "Replicas per service",
+    "title": "Replicas",
+    "worker": "Worker"
+  },
+  "scale": {
+    "about": "defaultIndex opens the tooltip at the API's first reading of 8 replicas when the chart first renders. The pointer or the arrow keys move it from there.",
+    "caption": "The API ran 8 replicas at 12:30, twice the worker's 4.",
+    "title": "Tooltip"
+  },
+  "series": "Services",
+  "title": "Step line chart"
+}

package/locales/en/specimen/stream-graph.json

@@ -0,0 +1,54 @@
+{
+  "about": "Many series stacked about a moving baseline, so each band's rise and fall reads across a long span. The graph gives up the total and every band's measure for that shape, so it renders no value axis and no grid, and the stack fills the plot's height.",
+  "campaign": {
+    "about": "defaultIndex opens the tooltip at a week when the chart first renders. The tooltip writes each source's own visits in the legend's order, because no value reads off a band against an axis.",
+    "caption": "In the week of July 20 social brought 38K visits, a third of the week's total.",
+    "title": "Tooltip"
+  },
+  "listening": {
+    "about": "baseline=\"silhouette\" centres the stack on a straight line, so the stream is symmetric about the middle of the plot. Hours of listening per month by genre.",
+    "caption": "Electronic listening peaked in July, and classical peaked in December.",
+    "classical": "Classical",
+    "electronic": "Electronic",
+    "genres": "Genres",
+    "hiphop": "Hip-hop",
+    "jazz": "Jazz",
+    "label": "Listening hours per month by genre",
+    "pop": "Pop",
+    "rock": "Rock",
+    "title": "Centred baseline"
+  },
+  "narrow": {
+    "about": "The traffic graph in a room 20rem wide, the column of a phone.",
+    "title": "Narrow room"
+  },
+  "ordered": {
+    "about": "insideOut={false} stacks the bands in the series' order, the first at the bottom, for an order a reader already knows. The late email band is then inside the stack and moves every band above it.",
+    "caption": "Visits per source in the series' order, organic at the bottom.",
+    "title": "Series order"
+  },
+  "quiet": {
+    "about": "A range without rows renders the empty state in the plot's place, at the plot's ratio.",
+    "caption": "Visits per source per week.",
+    "empty": "No visits recorded yet.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate reveals each band from the start of the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the bands at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "title": "Stream graph",
+  "traffic": {
+    "about": "Weekly visits from five sources over sixteen weeks. The bands stack inside out: the sources whose visits arrive early are in the middle and the late ones outside, so a late source does not move the bands beneath it. Each source keeps its color and its place in the legend.",
+    "caption": "A July campaign lifted social visits to 38K a week before they fell back, while email grew from none to 22K a week.",
+    "direct": "Direct",
+    "email": "Email",
+    "label": "Visits per source per week",
+    "organic": "Organic",
+    "referral": "Referral",
+    "social": "Social",
+    "sources": "Sources",
+    "title": "Traffic sources"
+  }
+}

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

@@ -0,0 +1,110 @@
+{
+  "about": "A hierarchy of parts as rings around a middle, one ring per level, such as spend by team, then by service, then by resource. Each part's arc is its share of the whole and is inside its parent's arc. Each top-level part is a family of arcs in one color, each ring paler than the one inside it, and the legend lists each family with its total. The arrow keys walk the arcs, a family before its parts. A sunburst shows how a whole divides level by level, and a treemap is the better chart for comparing the sizes of many parts.",
+  "credit": {
+    "about": "The bill with a committed-use credit of −€3,000 posted to the data team. An arc cannot be negative, so the chart gives a part below zero no arc, and the data team's total counts only the parts with an arc. hierarchyLeaves returns every leaf with its value as given, and the caption lists the leaves below zero.",
+    "caption_one": "{{names}} is below zero and has no arc. An arc cannot be negative.",
+    "caption_other": "{{names}} are below zero and have no arcs. An arc cannot be negative.",
+    "title": "A part below zero"
+  },
+  "folders": "Folders",
+  "hidden": {
+    "about": "defaultHiddenKeys hides the platform team when the chart first renders. Only the platform team has a third level, so the outer ring leaves with it, and the two rings left share the room. Every share in the tooltip is of the teams shown. A press on the legend shows the team again.",
+    "caption": "With the platform team hidden, the product team is 56% of the rest.",
+    "title": "A hidden team"
+  },
+  "largest": {
+    "about": "defaultIndex opens the tooltip at the third arc of the walk, virtual machines, when the chart first renders. The walk runs depth first and largest first: the platform team, compute, then virtual machines. The tooltip writes the resource's spend and its share of the bill to two significant digits.",
+    "caption": "Virtual machines are the largest resource at 23% of the bill.",
+    "title": "Tooltip"
+  },
+  "names": {
+    "archive": "Archive",
+    "backups": "Backups",
+    "blobs": "Blob storage",
+    "brand": "Brand",
+    "builds": "Builds",
+    "compute": "Compute",
+    "credit": "Committed-use credit",
+    "cron": "Cron",
+    "daily": "Daily",
+    "data": "Data",
+    "design": "Design",
+    "dns": "DNS",
+    "edits": "Edits",
+    "flags": "Feature flags",
+    "footage": "Footage",
+    "gpus": "GPUs",
+    "kubernetes": "Kubernetes",
+    "mailer": "Mailer",
+    "metrics": "Metrics",
+    "mobile": "Mobile app",
+    "network": "Network",
+    "photos": "Photos",
+    "pipelines": "Pipelines",
+    "platform": "Platform",
+    "product": "Product",
+    "proxy": "Auth proxy",
+    "queue": "Queue",
+    "registry": "Registry",
+    "scanner": "Scanner",
+    "screens": "Screens",
+    "secrets": "Secrets",
+    "snapshots": "Snapshots",
+    "status": "Status page",
+    "storage": "Storage",
+    "tracing": "Tracing",
+    "video": "Video",
+    "vms": "Virtual machines",
+    "warehouse": "Warehouse",
+    "web": "Web app",
+    "webhooks": "Webhooks",
+    "weekly": "Weekly"
+  },
+  "narrow": {
+    "about": "The bill in a room 20rem wide, the column of a phone. The rings and the hole shrink with the plot, and the legend wraps under it.",
+    "title": "Narrow room"
+  },
+  "palette": {
+    "about": "Each team states its palette: the platform team purple, the product team orange, the data team teal. A team's arcs mix its palette's chart color over the panel, paler in each ring. values false leaves the totals out of the legend.",
+    "caption": "The platform team spends more than the product and data teams together.",
+    "title": "Palettes"
+  },
+  "quiet": {
+    "about": "A sunburst without nodes renders the empty state in the plot's place, at the plot's ratio, and no legend.",
+    "caption": "Cloud spend this month.",
+    "empty": "No spend in this period.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate sweeps each ring's arcs in clockwise from 12 o'clock when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the arcs at once.",
+    "caption": "Cloud spend for September.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "share": "Of the bill",
+  "spend": {
+    "about": "September's cloud bill of €114,500 by team, then by service, then by resource. Each team is a family of arcs in one color, and each ring is paler than the ring inside it. A service without resources leaves a gap in the outer ring, so every part is inside its parent's arc. The hole writes the bill's total, and the caption states the platform team's share, which the example sums from hierarchyLeaves.",
+    "caption": "The platform team is {{share}}% of the bill.",
+    "center": "September",
+    "label": "Cloud spend for September by team, service and resource",
+    "title": "Spend by team, service and resource"
+  },
+  "storage": {
+    "about": "A file server's folders and subfolders. Each folder is its own family, so each takes the next series color, and a folder without subfolders leaves a gap in the outer ring. valueOptions writes the sizes in gigabytes.",
+    "caption": "Design and video files fill 62% of the file server.",
+    "label": "Storage on the file server by folder and subfolder",
+    "share": "Of the server",
+    "title": "Two levels",
+    "value": "Size"
+  },
+  "tail": {
+    "about": "The platform team's spend: Kubernetes and fourteen small services. Each small service is a sliver of the outer ring. The tooltip writes each one's name and spend, and the arrow keys walk to each.",
+    "caption": "Kubernetes is 86% of the platform team's spend. Fourteen small services share the rest.",
+    "label": "Platform team spend for September by service",
+    "share": "Of the team",
+    "title": "A long tail"
+  },
+  "teams": "Teams",
+  "title": "Sunburst chart",
+  "value": "Spend"
+}

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

@@ -0,0 +1,77 @@
+{
+  "about": "Moments on one time window across lanes, such as deploys and incidents per service. Moments of a lane closer than minGap of the window share a marker that counts them, and every lane shares the window, so the lanes compare.",
+  "burst": {
+    "about": "Seven alerts within two minutes share one marker in the color of its loudest moment. defaultIndex opens the tooltip at the marker: the heading names the lane and the range, and the rows list five alerts and then moreLabel's count of the rest.",
+    "alerts": "Alerts",
+    "caption": "Seven alerts in two minutes followed the deploy at 13:52 UTC.",
+    "changes": "Changes",
+    "checkout": "Checkout failures above 1%",
+    "deploy": "Deploy api 4.12",
+    "errors": "Error rate above 2%",
+    "label": "Changes and alerts during the incident",
+    "latency": "p99 latency above 800 ms",
+    "more_one": "{{count}} more alert",
+    "more_other": "{{count}} more alerts",
+    "queue": "Queue depth above 5,000",
+    "recovered": "Error rate recovered",
+    "rollback": "Rollback to api 4.11",
+    "title": "Clusters"
+  },
+  "deploys": {
+    "about": "Deploys and incidents of four services over one day, a lane per service in the order lanes lists them. A moment without a lane goes into the lane otherLabel names. The time axis writes five evenly spaced times in 24-hour UTC.",
+    "api": "API",
+    "backlog": "Queue backlog",
+    "backup": "Nightly backup",
+    "caption": "The api raised three alerts between 14:03 and 14:09 UTC and rolled back at 16:20.",
+    "cleared": "Backlog cleared",
+    "db": "Database",
+    "deploy": "Deploy {{version}}",
+    "errors": "Error rate alert",
+    "failover": "Failover drill",
+    "label": "Deploys and incidents on 28 September",
+    "latency": "Latency alert",
+    "notice": "Status page notice",
+    "other": "Other",
+    "rollback": "Rollback to {{version}}",
+    "slow": "Slow queries",
+    "title": "Lanes",
+    "web": "Web",
+    "worker": "Worker"
+  },
+  "narrow": {
+    "about": "The day's deploys in a room 20rem wide, the column of a phone. Each lane keeps its name, and the time axis leaves out a time that would meet another.",
+    "title": "Narrow room"
+  },
+  "quiet": {
+    "about": "A timeline without a moment inside its window renders the empty state in the plot's place.",
+    "caption": "Deploys and incidents today.",
+    "empty": "No deploys or incidents today.",
+    "label": "Deploys and incidents today",
+    "title": "Empty"
+  },
+  "releases": {
+    "about": "One lane of releases over a year. A chart of one lane renders no lane axis, and the tooltip heads a marker with its date alone. ticks sets three dates on the time axis, and labelOptions writes them in the medium date style.",
+    "caption": "Two of the year's nine releases needed a patch within three days.",
+    "label": "Releases from October 2025 to September 2026",
+    "patch": "Patch {{version}}",
+    "release": "Release {{version}}",
+    "title": "One lane"
+  },
+  "replay": {
+    "about": "animate grows each marker from its centre when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the markers at once.",
+    "caption": "The web deployed three times, and the api rolled back after its alerts.",
+    "label": "Deploys on 28 September",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "select": {
+    "about": "onSelect receives a marker's moments on a press, or on Enter or Space while the arrow keys walk the markers. The line under the chart lists the moments of the marker selected last.",
+    "caption": "Press a marker to list its moments.",
+    "label": "Deploys and incidents of the api and the database",
+    "none": "No marker selected.",
+    "picked_one": "Selected: {{list}}",
+    "picked_other": "Selected {{count}} moments: {{list}}",
+    "title": "Selection"
+  },
+  "title": "Timeline chart"
+}

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

@@ -0,0 +1,107 @@
+{
+  "about": "A hierarchy of parts as nested tiles whose areas follow their sizes, such as spend by team and then by service. Each top-level part is a family of tiles in one color, largest first from the top left, and the legend lists each family with its total. The arrow keys walk the tiles, a family before its parts. A treemap shows where the mass of many parts is, and a bar chart is the better chart for comparing values.",
+  "credit": {
+    "about": "The bill with a reserved-capacity credit of −€6,200 posted to the platform team. An area cannot be negative, so the chart gives a part below zero no tile, and the platform team's total counts only the parts with a tile. hierarchyLeaves returns every leaf with its value as given, and the caption lists the leaves below zero.",
+    "caption_one": "{{names}} is below zero and has no tile. An area cannot be negative.",
+    "caption_other": "{{names}} are below zero and have no tiles. An area cannot be negative.",
+    "title": "A part below zero"
+  },
+  "folders": "Folders",
+  "hidden": {
+    "about": "defaultHiddenKeys hides the platform team when the chart first renders. The other teams fill the plot, and every share on the tiles and in the tooltip is of the teams shown. A press on the legend shows the team again.",
+    "caption": "With the platform team hidden, the data team is 65% of the rest.",
+    "title": "A hidden team"
+  },
+  "largest": {
+    "about": "defaultIndex opens the tooltip at the seventh tile of the walk, Kubernetes, when the chart first renders. The walk runs depth first and largest first: the data team, its four services, then the platform team and Kubernetes. The tooltip writes the service's spend and its share of the bill to two significant digits.",
+    "caption": "Kubernetes is the largest service at 23% of the bill.",
+    "title": "Tooltip"
+  },
+  "names": {
+    "archive": "Archive",
+    "audio": "Audio",
+    "backups": "Backups",
+    "balancers": "Load balancers",
+    "builds": "Builds",
+    "cdn": "CDN",
+    "credit": "Reserved credit",
+    "cron": "Cron",
+    "data": "Data",
+    "design": "Design",
+    "dns": "DNS",
+    "documents": "Documents",
+    "firewall": "Web firewall",
+    "flags": "Feature flags",
+    "functions": "Functions",
+    "gateway": "API gateway",
+    "kafka": "Kafka",
+    "kubernetes": "Kubernetes",
+    "logs": "Log ingest",
+    "mailer": "Mailer",
+    "metrics": "Metrics",
+    "nat": "NAT gateways",
+    "objects": "Object storage",
+    "photos": "Photos",
+    "platform": "Platform",
+    "postgres": "Postgres",
+    "product": "Product",
+    "proxy": "Auth proxy",
+    "queue": "Queue",
+    "redis": "Redis",
+    "registry": "Registry",
+    "scanner": "Scanner",
+    "search": "Search cluster",
+    "secrets": "Secrets",
+    "snapshots": "Snapshots",
+    "status": "Status page",
+    "tracing": "Tracing",
+    "video": "Video",
+    "webhooks": "Webhooks"
+  },
+  "narrow": {
+    "about": "The bill in a room 20rem wide, the column of a phone. A tile too narrow for its name writes none, and the walk and the tooltip still name it.",
+    "title": "Narrow room"
+  },
+  "palette": {
+    "about": "Each team states its palette: the data team teal, the platform team purple, the product team orange. A team's services mix its palette's chart color over the panel. values false leaves only the names on the tiles and in the legend.",
+    "caption": "The platform team's services cost nearly as much as the data team's.",
+    "title": "Palettes"
+  },
+  "quiet": {
+    "about": "A treemap without nodes renders the empty state in the plot's place, at the plot's ratio, and no legend.",
+    "caption": "Cloud spend this month.",
+    "empty": "No spend in this period.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate slides each tile in from the left when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the tiles at once.",
+    "caption": "Cloud spend for September.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "share": "Of the bill",
+  "spend": {
+    "about": "September's cloud bill of €95,400 by team and then by service. Each team is a family of tiles in one color, its largest service the strongest. Each tile that fits writes its service's name, spend and share of the bill, and the legend writes each team's total. hierarchyLeaves returns every service with its share, and the caption states the two largest.",
+    "caption": "{{first}} and {{second}} are {{share}}% of the bill.",
+    "label": "Cloud spend for September by team and service",
+    "title": "Spend by team and service"
+  },
+  "storage": {
+    "about": "A file server's folders in one level. Each folder is its own family, so each takes the next series color. valueOptions writes the sizes in gigabytes.",
+    "caption": "Design and video files fill 58% of the file server.",
+    "label": "Storage on the file server by folder",
+    "share": "Of the server",
+    "title": "One level",
+    "value": "Size"
+  },
+  "tail": {
+    "about": "The platform team's spend: Kubernetes and fourteen small services. A tile too small for its name writes none, because a clipped word reads as another word. The tooltip writes each one's name, and the arrow keys walk to each.",
+    "caption": "Kubernetes is 86% of the platform team's spend. Fourteen small services share the rest.",
+    "label": "Platform team spend for September by service",
+    "share": "Of the team",
+    "title": "A long tail"
+  },
+  "teams": "Teams",
+  "title": "Treemap chart",
+  "value": "Spend"
+}

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

@@ -0,0 +1,54 @@
+{
+  "about": "The distribution of each group as the density of its values, mirrored about the middle of its band, with its quartiles inside. The tooltip lists the values each density peaks at, which a box plot cannot show.",
+  "endpoints": {
+    "about": "The response times of 50 requests to each of three endpoints. Each violin is as wide as its bar at its own densest value, so its width compares within the group only. Inside it are the whisker line, the middle half as a narrow bar and the median as a hollow point.",
+    "caption": "Search peaks at 22ms and at 167ms, cache hits and index reads, and its middle half spans the gap between them.",
+    "checkout": "Checkout",
+    "label": "Response times of the shop's API by endpoint",
+    "profile": "Profile",
+    "search": "Search",
+    "title": "Response times"
+  },
+  "narrow": {
+    "about": "The three endpoints in a room 20rem wide, the column of a phone. Each violin takes its share of the width, at most 110px.",
+    "title": "Narrow room"
+  },
+  "outline": {
+    "about": "quartiles false leaves out the whisker line, the quartile bar and the median, for a violin read for its outline alone. The key then names the density alone.",
+    "caption": "8 of 50 profile requests take more than 100ms.",
+    "title": "Outline alone"
+  },
+  "peaks": {
+    "about": "defaultIndex opens the tooltip at a group when the chart first renders. The rows are the median, the middle half, the range, the values the density peaks at and the count.",
+    "caption": "Search peaks at 22 and 167ms, while its median of 25ms describes the cache hits alone.",
+    "title": "Tooltip"
+  },
+  "plans": {
+    "about": "Session lengths on three plans, the violins in the teal palette's chart color. valueDomain fixes the axis at 0 to 60 minutes, so every month's chart compares on one scale. This month's longest session took 39 minutes, and the rounded axis would end at 40.",
+    "caption": "Team's median of 23.5 minutes falls between its peaks near 5 and 35 minutes, and 2 of its 40 sessions last 15 to 25 minutes.",
+    "free": "Free",
+    "label": "Session lengths by plan",
+    "pro": "Pro",
+    "sessions": "Sessions",
+    "team": "Team",
+    "title": "Session lengths"
+  },
+  "quiet": {
+    "about": "A violin 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 shop's API this hour.",
+    "empty": "No requests this hour.",
+    "title": "Empty"
+  },
+  "replay": {
+    "about": "animate grows each violin from the axis when the chart mounts, and Replay mounts the chart again. Under reduced motion recharts renders the violins at once.",
+    "replay": "Replay",
+    "title": "Animation"
+  },
+  "requests": "Requests",
+  "smooth": {
+    "about": "bandwidth sets one Gaussian kernel for every group in place of Silverman's bandwidth per group. A kernel wider than the gap between two peaks merges them, so the bandwidth decides what a violin shows.",
+    "caption": "At a 60ms kernel, Search's two peaks blur into one at 29ms.",
+    "title": "Wide kernel"
+  },
+  "title": "Violin plot"
+}