@mstone6969/graph 0.1.0 → 0.2.0

package/README.md

@@ -2,9 +2,9 @@
 
 A class-based chart library for React. Every chart is a TypeScript class with a matching React component: 2D charts draw to SVG with d3, and 3D charts draw to WebGL with three.js.
 
-[Live gallery](https://malcolmston.github.io/graph/)
+[Live site](https://malcolmston.github.io/graph/)
 
-**642 chart classes (521 d3/SVG, 121 three.js/WebGL) expand to 42,928 chart types (35,606 2D, 7,322 3D).** A type is one class with one combination of its variant axes, for example `bar.horizontal.stacked`. Every type passes a test proving its geometry differs from its siblings, so this counts configurations, not 42,928 separately designed forms.
+**628 chart classes (519 d3/SVG, 109 three.js/WebGL) expand to 42,154 variant combinations (35,114 2D, 7,040 3D).** A type is one class with one combination of its variant axes, for example `bar.horizontal.stacked`. Every type passes a test proving its geometry differs from its siblings, so this counts configurations, not 42,154 separately designed forms.
 
 The count comes from `yarn vitest run src/catalog.test.ts`, which prints it. A class such as `BarChart` is one piece of code; its declared variant axes (orientation, stacking, padding) multiply into chart types, so hand-written classes are far fewer than types.
 
@@ -14,7 +14,7 @@ The count comes from `yarn vitest run src/catalog.test.ts`, which prints it. A c
 yarn add @mstone6969/graph react react-dom
 ```
 
-Everything comes from one import, and bundlers keep only what you use: `Bar` adds about 550 KB before gzip, `BarChart` about 370 KB, and `GraphType` about 20 KB. `react` must be installed even if you only use the classes.
+Everything comes from one import, and bundlers keep only what you use: `Bar` adds about 323 KB minified, `BarChart` about 190 KB, and `GraphType` about 20 KB, measured in a Vite app build with React external. `react` must be installed even if you only use the classes.
 
 ## Four ways to use it
 
@@ -26,7 +26,7 @@ import { Bar, Orientation, StackMode } from '@mstone6969/graph'
 <Bar data={rows} orientation={Orientation.Horizontal} stack={StackMode.Stacked} />
 ```
 
-A component is named after its class without `Chart`, `Plot`, `Map`, `Graph` or `Diagram`, so `BarChart` gives `Bar` and `ChoroplethMap` gives `Choropleth`. If that name is taken, by a class or a browser global, it ends in `Graph` instead: `Histogram` gives `HistogramGraph`, and each gallery page shows the name.
+A component is named after its class without `Chart`, `Plot`, `Map`, `Graph` or `Diagram`, so `BarChart` gives `Bar` and `ChoroplethMap` gives `Choropleth`. If that name is taken, by a class or a browser global, it ends in `Graph` instead: `BackToBackHistogram` gives `BackToBackHistogramGraph`, and each chart page on the site shows the name.
 
 **GraphType.** For a chart chosen at runtime. `GraphType` has one member per class, and variants are props. `Graph` loads the whole catalog the first time it needs one, so prefer a component when you know the chart.
 
@@ -60,7 +60,9 @@ Option fields name your data columns, and their defaults match the sample data,
 
 `<Graph>` keeps `type`, `of`, `chart`, `className`, `style`, `id` and `role` for itself. A few classes, such as `BoxPlot`, have a variant axis called `style`: reach those through an instance. Components keep only `className`, `style`, `id` and `role`, so a chart option called `type` works on them.
 
-Every chart also takes the shared `ChartOptions`: `width`, `height`, `title`, `subtitle`, `theme`, `animate`, `legend`, `tooltip`, `margin`, `ariaLabel`, `onSelect` and `keyboard`. Without a fixed size it fills its parent and follows resizes.
+Every chart also takes the shared `ChartOptions`: `width`, `height`, `title`, `subtitle`, `theme`, `animate`, `legend`, `tooltip`, `margin`, `ariaLabel`, `onSelect` and `keyboard`. Without a fixed size it takes its parent's width, follows resizes and is 400px tall.
+
+Every x/y chart also takes `xTicks`, `yTicks`, `xFormat`, `yFormat`, `xDomain` and `yDomain`. The domains fix the ends of a continuous axis, `null` keeps the chart's own value for one end, and marks past them are clipped to the plot. Band axes, and charts whose marks do not follow an axis, ignore them.
 
 Every x/y chart also takes `referenceLines`, `referenceBands` and `annotations`, positioned by data value through the chart's own scales, so categories, dates and log axes all work. `axis` names the axis the value sits on, so `AnnotationAxis.Y` (the default) draws a horizontal line. Values off the domain are skipped, bands are trimmed to it, and a label with no free spot in the plot is dropped. Bands sit behind the marks, so charts that fill the whole plot hide them.
 
@@ -97,7 +99,7 @@ useEffect(() => socket.subscribe(live.append), [live.append])
 return <Graph chart={live.chart} />
 ```
 
-**Supported:** flat rows and long-form series rows (`{ date, series, value }`) on 2D charts with `DataShape.Table`, which is 387 catalog classes, row-fed massive charts included. Columnar massive data and anything else throws a clear error from `append` and `pause`: 3D charts, and hierarchy, graph, matrix, grid, volume, geo, function, text and genome data.
+**Supported:** flat rows and long-form series rows (`{ date, series, value }`) on 2D charts with `DataShape.Table`, which is 379 catalog classes, row-fed massive charts included. Columnar massive data and anything else throws a clear error from `append` and `pause`: 3D charts, and hierarchy, graph, matrix, grid, volume, geo, function, text and genome data.
 
 **Motion:** cartesian charts whose x and y are both continuous slide. Each paint draws final geometry, then the marks, ticks and grid decay smoothly from where they last appeared, so a spike rescales instead of jumping, and marks are clipped to the plot only while they move. Charts with a band or point axis, a zoom or brush, their own `draw`, or no axes morph each mark with its usual transition instead. Massive charts draw on a canvas, so they and their axes repaint in one step. `animate: false` and reduced motion paint straight through.
 
@@ -125,18 +127,20 @@ Zooming redraws through the real scales, so ticks are recomputed and marks stay
 
 `zoom: true` follows the categories when y is the band axis, so a horizontal bar chart widens its bars instead of cutting their length. Asking for a value axis on a bar chart (`ZoomAxis.XY`) does cut bars at the plot edge, since their baseline leaves the view.
 
-Not supported: a chart that cannot follow a scale says so with one `console.warn`, has `chart.viewport.supported === false`, and draws as if the option were off. That covers custom axes with no inverse or a fixed domain (`DetectionErrorCurve`'s probit and log scales; the y axes of `ManhattanPlot` and of a mel `SpectrogramChart`, which still zoom along x) and charts that lay out their own marks (`MarimekkoBar`). `TileMapDensity` has no interactive zoom: its `zoom` option is the tile level, a non-number there is refused, and `brush` still works. Charts with a second value scale (`DualAxisChart`, `ParetoBar`, `ParetoChart`, `TimeDomainDiffChart`, `FilterResponseChart`) and `ECGChart`'s fixed amplitude grid zoom along their first axis only, because the rest would otherwise drift from its marks. The y axis does not rescale to fit the visible x window. Hand-picked ticks stay while at least three are in view, then the scale ticks itself; a chart's own tick text gives way to d3's when zoom makes neighbouring labels equal. Layers in the margin, such as a second axis or end labels, stay out of the clip on that side.
+Not supported: a chart that cannot follow a scale says so with one `console.warn`, has `chart.viewport.supported === false`, and draws as if the option were off. That covers custom axes with no inverse or a fixed domain (`DetectionErrorCurve`'s probit and log scales; the y axes of `ManhattanPlot` and of a mel `SpectrogramChart`, which still zoom along x). `TileMapDensity` has no interactive zoom: its `zoom` option is the tile level, a non-number there is refused, and `brush` still works. Charts with a second value scale (`DualAxisChart`, `ParetoChart`, `TimeDomainDiffChart`, `FilterResponseChart`) and `ECGChart`'s fixed amplitude grid zoom along their first axis only, because the rest would otherwise drift from its marks. The y axis does not rescale to fit the visible x window. Hand-picked ticks stay while at least three are in view, then the scale ticks itself; a chart's own tick text gives way to d3's when zoom makes neighbouring labels equal. Layers in the margin, such as a second axis or end labels, stay out of the clip on that side.
 
 ## Export
 
-Every chart saves itself as an image or as data. `chart.exportFormats` says what is available.
+Every chart saves itself as an image, a PDF, a spreadsheet or plain data. `chart.exportFormats` says what is available.
 
 ```ts
-import { ExportFormat } from '@mstone6969/graph'
+import { ExportFormat, PdfOrientation, PdfPageSize } from '@mstone6969/graph'
 
 chart.toSVG()                     // string, 2D only
 chart.toPNG({ scale: 3 })         // Promise<Blob>, scale defaults to 2
 chart.toCSV()                     // string, from chart.table()
+chart.toPDF({ pageSize: PdfPageSize.Letter, orientation: PdfOrientation.Landscape, title: 'Revenue', table: true }) // Promise<Blob>
+chart.toExcel({ image: true })    // Promise<Blob>, an .xlsx from chart.table()
 chart.download(ExportFormat.PNG, { filename: 'revenue.png' })
 ```
 
@@ -155,6 +159,9 @@ Charts export finished: marks caught mid-animation are saved at their end state,
 - **3D PNG** comes from the chart's renderer at the current camera, with any entry animation finished, and labels, title and legend drawn on top. A `scale` beyond the GPU's limit throws.
 - **CSV** needs rows in `table()`, and throws otherwise. Dates are ISO 8601. Text that a spreadsheet would run as a formula is prefixed with `'`. `download` adds the byte order mark Excel needs; `toCSV()` does not.
 - **Fonts.** `toSVG()` is synchronous and names the theme's font stack. `chart.toStandaloneSVG()`, `toPNG` and `download` also embed any `@font-face` the page declares for that font, when its stylesheet is readable. A font that cannot be fetched stays linked and the text draws in the fallback fonts.
+- **PDF is a picture.** `toPDF` places the chart on the page as a PNG, on 2D and 3D charts alike, so its text cannot be selected and it pixelates when zoomed far in. `scale` defaults to 3. `table: true` adds `table()` as real text on pages after it. Built-in PDF fonts are Western European only, so other scripts are drawn as small pictures. Tables stop at 25,000 rows, and a cell wider than a column ends in an ellipsis.
+- **Excel needs rows.** `toExcel` writes `table()` to a real .xlsx with numbers as numbers, dates as dates in local time, and text as text. Cells starting with `=`, `+`, `-` or `@` are stored as text and never run. A chart without rows rejects with `ExportErrorCode.NoData`, and a chart with more rows than a worksheet holds does not list it. `image: true` adds a sheet holding the chart.
+- **PDF and Excel load on use.** Their code, and `pdf-lib` and `fflate`, are dynamic imports, so a chart that never calls them keeps them out of your main bundle. If the load fails, the call rejects with `ExportErrorCode.Unavailable`.
 - **Web map tiles.** `toSVG()` keeps tiles as links, so that file needs the network. `toStandaloneSVG()`, `toPNG` and `download` fetch every tile and embed it. The tile server must send `Access-Control-Allow-Origin`: if any tile cannot be read within 20 seconds, they reject with `ExportErrorCode.Tainted` and name the tile, rather than save a map with holes. Without `tiles`, a slippy map has nothing to fetch and always exports.
 
 ## Keyboard
@@ -163,13 +170,13 @@ Charts export finished: marks caught mid-animation are saved at their end state,
 
 | Key | Action |
 | --- | --- |
-| Arrows | Move between marks. Left and Right stay in a series, Up and Down change series. Without series, or in a free layout such as a map or scatter, arrows go the way they point. |
+| Arrows | Move between marks. Left and Right stay in a series, Up and Down change series. A Line has one mark per x, so there Down also moves along x. Without series, or in a free layout such as a map or scatter, arrows go the way they point. |
 | Shift and an arrow | Step through the series in data order, so every mark is reachable, including marks stacked on the same spot |
 | Home, End, Page Up, Page Down | First, last, or a tenth of the way through the series |
 | Enter, Space | Select the mark, as a click does, so `onSelect` fires and a drill map drills |
 | Escape | Leave the marks. The next arrow picks up where you were |
 
-The current mark gets a ring, the hover tooltip and an `aria-live` reading of that tooltip. `tooltip: false` removes the box and keeps the ring and the reading, because the reading is the only way a screen reader user gets the value. Marks reached are the ones given to `ctx.hover`, and on a zoomed chart only those inside the plot. A chart with no such marks, as with the signal and massive charts or empty data, stays `role="img"` with no tab stop. Exports leave all of this out. 3D charts ignore the option.
+The current mark gets a ring, the hover tooltip and an `aria-live` reading of that tooltip. `tooltip: false` removes the box and keeps the ring and the reading, because the reading is the only way a screen reader user gets the value. Marks reached are the ones given to `ctx.hover`, and on a zoomed chart only those inside the plot. A chart with no such marks, as with the signal and massive charts, the recurrence plot, crossfilter histograms or empty data, stays `role="img"` with no tab stop. Exports leave all of this out. 3D charts ignore the option.
 
 With marks to reach, the svg becomes `role="application"`. `img` hides its children and is not a keyboard target, and a screen reader in browse mode would otherwise use the arrow keys itself. DOM focus stays on the svg and the cursor moves over the marks, so a redraw cannot lose focus and the marks are never written to.
 
@@ -190,6 +197,26 @@ import { Graph, MassiveDecimation, MassiveLineChart, MassiveScatterChart, ZoomAx
 
 Columnar data (`{ x, y, series, names, time }` with typed arrays) is the cheapest input. Rows work too and can be appended; columnar data cannot. With no SVG marks, `keyboard` has nothing to reach.
 
+## Styling
+
+`chartStyle` styles any chart from the shared layer. Unset keys leave the chart as drawn. Colours take any CSS colour, or a theme token name such as `good`.
+
+```tsx
+import { Bar, Line, ScaleKind, StrokeDash } from '@mstone6969/graph'
+
+<Line data={rows} chartStyle={{ seriesColors: { Paid: '#0072b2' }, strokeWidth: 1.5, strokeDash: StrokeDash.Dashed, opacity: 0.8 }} />
+<Bar data={rows} yScaleType={ScaleKind.Sqrt} aspectRatio={2} chartStyle={{ colors: ['#7a5230', '#3f7c85'], fontSize: 1.2 }} />
+```
+
+- Colour: `colors`, `seriesColors`, `sequential`, `diverging`.
+- Marks: `strokeWidth`, `strokeDash`, `strokeCap`, `strokeJoin`, `opacity`, `markSize`, `edges`. SVG marks; `opacity` also reaches 3D materials.
+- Text: `fontSize`, `fontFamily`.
+- 3D: `wireframe`, `antialias`, `pixelRatio`.
+- Beside `chartStyle`: `aspectRatio` on every chart, `xScaleType` and `yScaleType` on SVG charts with x and y axes.
+- `chart.renderer` says what draws the marks: `RenderType.Svg`, `Canvas` or `WebGL`. Canvas charts take colour and text styling only.
+
+The playground offers each of these where it changes the chart in front of you. See the Styling page of the docs.
+
 ## Specialist charts
 
 Every chart here takes the shared options, and it has a component and a `GraphType` member.
@@ -251,6 +278,73 @@ import { MarketProfileChart, TpoBracket, TpoForm } from '@mstone6969/graph'
 <Graph of={MarketProfileChart} data={bars} form={TpoForm.Blocks} bracket={TpoBracket.Hour} />
 ```
 
+## Applied charts
+
+These take the shared options too, and each has a component and a `GraphType` member. Their built-in samples are synthetic, so `meta.sample` shows the data shape and nothing more.
+
+**Software diagrams.** `SequenceDiagram` orders messages between lifelines, with activation bars replayed from the calls, `alt`, `opt` and `loop` frames, and notes. `EntityRelationshipDiagram` takes one row per table column, as `information_schema` gives them, and derives crow's foot cardinality from nullability and keys. `ArchitectureDiagram` draws a C4 model at the context, container or component level from one data set. `NetworkTopologyDiagram` lays out routers, switches, servers, clouds and databases by tier, ring or force. `LogicGateDiagram` simulates a circuit in 0, 1 and X, and colours each wire by its state.
+
+```tsx
+import { ArchitectureDiagram, ArchitectureLevel, EntityRelationshipDiagram, ErDetail, LogicGateDiagram, LogicSymbolStyle, NetworkTopologyDiagram, SequenceDiagram, SequenceNumbering, TopologyArrangement } from '@mstone6969/graph'
+
+<Graph of={SequenceDiagram} data={[{ from: 'Web', to: 'API', label: 'POST /order', kind: 'sync' }, { from: 'API', to: 'Web', label: '201', kind: 'return' }]} numbering={SequenceNumbering.Nested} />
+<Graph of={EntityRelationshipDiagram} data={columns} table="table_name" column="column_name" detail={ErDetail.Keys} /> // rows: { table, column, type, key, references, nullable }
+<Graph of={ArchitectureDiagram} data={{ nodes, links }} level={ArchitectureLevel.Containers} /> // nodes: { id, name, kind, parent, technology, description, external }
+<Graph of={NetworkTopologyDiagram} data={{ nodes, links }} arrangement={TopologyArrangement.Radial} /> // nodes: { id, name, kind, address }
+<Graph of={LogicGateDiagram} data={{ gates, wires }} symbols={LogicSymbolStyle.Iec} /> // gates: { id, type, label, value }, wires: { from, to }
+```
+
+**Machine learning.** All six plot results you already have: none of them trains a model. `LearningCurveChart` takes long rows of `epoch`, `run`, `split` and `value`, and draws the mean per split with a spread band, the best epoch and the overfitting gap. `ElbowPlot` marks the bend by Kneedle, the L method, chord distance or second difference, and says so when a curve has none. `DecisionBoundaryChart` contours your classifier's probabilities over two features. `FeatureImportanceChart` ranks scores, with whiskers and the tail folded into Other. `PartialDependencePlot` sweeps your `predict` function over background rows, or reads precomputed curves. `AttentionHeatmap` draws weights as given, with target tokens as rows, and `chart.check()` reports rows that do not sum to 1 instead of renormalising them.
+
+```tsx
+import { AttentionHeadView, AttentionHeatmap, DecisionBoundaryChart, ElbowMethod, ElbowPlot, FeatureImportanceChart, FeatureImportanceSign, LearningCurveChart, OverfitShading, PartialDependencePlot, RunSpread, SilhouetteView } from '@mstone6969/graph'
+
+<Graph of={LearningCurveChart} data={rows} x="epoch" y="value" run="run" split="split" validationSplit="val" spread={RunSpread.Confidence95} gap={OverfitShading.AfterBest} />
+<Graph of={ElbowPlot} data={rows} x="k" y="inertia" method={ElbowMethod.Kneedle} silhouetteView={SilhouetteView.Panel} /> // rows: { k, inertia, silhouette }
+<Graph of={DecisionBoundaryChart} data={{ points, predict: (x, y) => model.proba(x, y) }} /> // predict returns { class: probability } or a label
+<Graph of={FeatureImportanceChart} data={rows} x="feature" y="gain" sign={FeatureImportanceSign.Value} top={12} />
+<Graph of={PartialDependencePlot} data={background} x="age" predict={model.predict} />
+<Graph of={AttentionHeatmap} data={{ source, target, heads: [{ name: 'Head 1', weights }] }} headView={AttentionHeadView.SmallMultiples} />
+```
+
+**Strategy and research frameworks.** `SwotMatrix` and `RaciMatrix` fit wrapped text to their cells and count what they cannot show. `RaciMatrix` audits every task for exactly one Accountable and at least one Responsible: read `chart.plan.flagged`. `VanWestendorpChart` finds the four price points from one row per respondent, and `curves` picks between the two published PMC and PME conventions. `NpsGauge` takes 0 to 10 answers. `AnsoffMatrix` places initiatives by market and product. `PerceptualMap` plots two rated attributes with fitted property vectors, or a Gabriel biplot.
+
+```tsx
+import { AnsoffDisplay, AnsoffMatrix, NpsGauge, PerceptualMap, RaciMatrix, SwotLayout, SwotMatrix, VanWestendorpChart, VanWestendorpCurves } from '@mstone6969/graph'
+
+<Graph of={SwotMatrix} data={[{ quadrant: 'S', item: 'Loyal regulars' }]} layout={SwotLayout.Rows} />
+<Graph of={RaciMatrix} data={[{ task: 'Launch', role: 'Lead', assignment: 'A/R' }]} grouping load />
+<Graph of={VanWestendorpChart} data={rows} tooCheap="q1" cheap="q2" expensive="q3" tooExpensive="q4" curves={VanWestendorpCurves.Direct} />
+<Graph of={NpsGauge} data={rows} score="score" />
+<Graph of={AnsoffMatrix} data={rows} item="initiative" display={AnsoffDisplay.Bars} risk />
+<Graph of={PerceptualMap} data={rows} name="brand" x="price" y="quality" xDomain={[1, 7]} yDomain={[1, 7]} vectors />
+```
+
+**Life science.** `MaPlot` computes M and A with median or loess normalisation and BH or Bonferroni calls, from red and green channels, precomputed values or a DESeq2-style `baseMean`. `OncoPrint` reads cBioPortal and MAF alteration terms, with a row for every profiled sample so that frequencies keep the whole cohort as the denominator. `PedigreeChart` follows standard genetics notation. Status columns are boolean-like, so map PED affection codes first: in PED, 1 means unaffected. `RamachandranPlot` judges each residue against the MolProbity Top8000 regions for its class. The regions are simplified polygons, so use MolProbity itself for formal validation.
+
+The Ramachandran regions are adapted from the Richardson Lab Top8000 data (Williams et al. 2018, Protein Science 27:293-315), used under CC BY 4.0. The chart's default subtitle carries this credit, so keep it, or credit the data yourself, if you replace the subtitle.
+
+```tsx
+import { MaNormalization, MaPlot, OncoPrint, OncoSort, PedigreeCarrierMark, PedigreeChart, RamachandranPanel, RamachandranPlot } from '@mstone6969/graph'
+
+<Graph of={MaPlot} data={rows} gene="gene" red="R" green="G" pvalue="p" normalization={MaNormalization.Loess} />
+<Graph of={OncoPrint} data={maf} sample="Tumor_Sample_Barcode" gene="Hugo_Symbol" alteration="Variant_Classification" sort={OncoSort.Memo} />
+<Graph of={PedigreeChart} data={people} carrierMark={PedigreeCarrierMark.Dot} showKey /> // rows: { id, father, mother, sex, affected, carrier, deceased, proband }
+<Graph of={RamachandranPlot} data={residues} panel={RamachandranPanel.Glycine} /> // rows: { phi, psi, residue, nextResidue, omega, label }
+```
+
+`<Graph>` and components keep `id` and `style` for themselves, so rename `PedigreeChart`'s id column, or set `HovmollerDiagram`'s `style`, through an instance.
+
+**Rotation, waves and buildings.** `RelativeStrengthRotation` joins the financial module. It tracks relative strength and its momentum through four quadrants, a method developed by Julius de Kempenaer. His exact formula is proprietary, so `RotationMethod` offers two named approximations that will not match licensed software, or you can name your own computed columns with `ratio` and `momentum`. It does not reproduce licensed RRG output. `HovmollerDiagram` joins the earth science module and maps a field against time and longitude or latitude, with stated or fitted phase-speed guides. `FloorPlanMap` joins the maps and draws rooms in plain plan units, with one colour scale across floors, door swings, asset markers and on-screen floor buttons.
+
+```tsx
+import { FloorDoorSwing, FloorPlanMap, HovmollerDiagram, HovmollerGuides, HovmollerSection, RelativeStrengthRotation, RotationMethod } from '@mstone6969/graph'
+
+<Graph of={RelativeStrengthRotation} data={prices} benchmarkSymbol="SPX" method={RotationMethod.ZScore} tail={10} /> // rows: { date, series, close }
+<Graph of={HovmollerDiagram} data={rows} section={HovmollerSection.Longitude} guides={HovmollerGuides.Fitted} /> // rows: { time, longitude, latitude, value }
+<Graph of={FloorPlanMap} data={{ rooms, doors: [{ from: 'Lab', to: 'Hall', level: 2, swing: FloorDoorSwing.Left }], assets }} level={2} zoom /> // rooms: { name, level, value, points }
+```
+
 ## Maps
 
 Every 2D map takes `zoom` for drag, wheel, double click and on-screen buttons. `chart.viewport` does the same from code (`zoomIn`, `zoomOut`, `reset`, `fit`).
@@ -365,14 +459,17 @@ export class DotRankChart extends CartesianChart<DotRankOptions, DotRankAxes> {
 
 The full rules are in [AUTHORING.md](AUTHORING.md). A chart is finished when `yarn vitest run src/charts/<module>` passes and `yarn sheet <module>` renders it correctly in light and dark.
 
-## Gallery
+## Site
 
-`gallery/` is a browsable catalog of every type: search, filters, a live chart per type, a control for each variant axis, a copyable snippet and the data table.
+The site is at <https://malcolmston.github.io/graph/>. It covers the 628 chart classes with a page per chart, a family page for each of the 21 families, guides and reference docs, and a playground that runs TSX in the browser. Sample data is labelled as such. `gallery/` holds its source, and `.github/workflows/pages.yml` deploys it on every push to `main`.
 
 ```sh
-yarn dev             # local gallery
+yarn install         # once
+yarn dev             # local site, on the port Vite prints
 yarn build:gallery   # writes dist-gallery/
+yarn generate:docs   # rebuilds gallery/docs/generated after a change to src
 yarn e2e             # checks dist-gallery in WebKit, screenshots in .cache/gallery/
+yarn e2e:site        # every docs page, family and chart link in WebKit, screenshots in .cache/site/
 yarn e2e:animated    # every 2D class settles on its static render
 yarn e2e:maps        # map input in WebKit, including tiles
 yarn e2e:live        # streaming soak and fidelity sweep

package/dist/ExcelWriter-3ZSYUH4T.cjs

@@ -0,0 +1,154 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } }
+
+var _chunk753UBLV2cjs = require('./chunk-753UBLV2.cjs');
+
+
+
+var _chunkZ3JPIJSCcjs = require('./chunk-Z3JPIJSC.cjs');
+
+// src/core/ExcelWriter.ts
+var _fflate = require('fflate');
+var TYPE = "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
+var HEAD = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>\n';
+var MAIN = "http://schemas.openxmlformats.org/spreadsheetml/2006/main";
+var PACKAGE = "http://schemas.openxmlformats.org/package/2006";
+var LINKS = "http://schemas.openxmlformats.org/officeDocument/2006/relationships";
+var CONTENT = "application/vnd.openxmlformats-officedocument";
+var MAX_COLUMNS = 16384;
+var MAX_ROWS = 1048576;
+var MAX_TEXT = 32767;
+var MAX_SERIAL = 2958465;
+var DAY = 864e5;
+var EPOCH = Date.UTC(1899, 11, 30);
+var LEAP_BUG = 61;
+var EMU_PER_PIXEL = 9525;
+var [MIN_WIDTH, MAX_WIDTH] = [8, 60];
+var MEASURED = 1e3;
+var Style = { Date: 1, DateTime: 2, Header: 3, Guarded: 4 };
+var FORMULA = /^[=+\-@\t\r\n]/;
+var STYLES = `${HEAD}<styleSheet xmlns="${MAIN}"><numFmts count="2"><numFmt numFmtId="164" formatCode="yyyy\\-mm\\-dd"/><numFmt numFmtId="165" formatCode="yyyy\\-mm\\-dd\\ hh:mm:ss"/></numFmts><fonts count="2"><font><sz val="11"/><name val="Calibri"/></font><font><b/><sz val="11"/><name val="Calibri"/></font></fonts><fills count="2"><fill><patternFill patternType="none"/></fill><fill><patternFill patternType="gray125"/></fill></fills><borders count="1"><border><left/><right/><top/><bottom/><diagonal/></border></borders><cellStyleXfs count="1"><xf numFmtId="0" fontId="0" fillId="0" borderId="0"/></cellStyleXfs><cellXfs count="5"><xf numFmtId="0" fontId="0" fillId="0" borderId="0" xfId="0"/><xf numFmtId="164" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="165" fontId="0" fillId="0" borderId="0" xfId="0" applyNumberFormat="1"/><xf numFmtId="49" fontId="1" fillId="0" borderId="0" xfId="0" quotePrefix="1" applyNumberFormat="1" applyFont="1"/><xf numFmtId="49" fontId="0" fillId="0" borderId="0" xfId="0" quotePrefix="1" applyNumberFormat="1"/></cellXfs><cellStyles count="1"><cellStyle name="Normal" xfId="0" builtinId="0"/></cellStyles></styleSheet>`;
+var ExcelWriter = class _ExcelWriter {
+  #strings = /* @__PURE__ */ new Map();
+  #references = 0;
+  static async write(chart, { image, scale = 2 } = {}) {
+    const table = _chunk753UBLV2cjs.ExportText.rows(chart, "Excel export");
+    return _ExcelWriter.file(table, image ? await chart.toPNG({ scale }) : null, scale);
+  }
+  /** `image` is a PNG drawn at `scale`, placed at the chart's own size on a second sheet. */
+  static async file(table, image, scale) {
+    if (table.rows.length >= MAX_ROWS || table.columns.length > MAX_COLUMNS) {
+      throw new (0, _chunkZ3JPIJSCcjs.ChartExportError)("unsupported" /* Unsupported */, `A worksheet holds ${MAX_ROWS} rows and ${MAX_COLUMNS} columns, and this table has ${table.rows.length} rows and ${table.columns.length} columns. Use CSV.`);
+    }
+    return new _ExcelWriter().#workbook(table, image && new Uint8Array(await image.arrayBuffer()), scale);
+  }
+  #workbook(table, image, scale) {
+    const sheets = [["Data", this.#sheet(table)], ...image ? [["Chart", _ExcelWriter.#pictureSheet()]] : []];
+    const parts = {
+      "[Content_Types].xml": _ExcelWriter.#xml(_ExcelWriter.#types(sheets.length)),
+      "_rels/.rels": _ExcelWriter.#xml(_ExcelWriter.#links([`${LINKS}/officeDocument`, "xl/workbook.xml"])),
+      "xl/workbook.xml": _ExcelWriter.#xml(_ExcelWriter.#book(sheets.map(([name]) => name))),
+      "xl/_rels/workbook.xml.rels": _ExcelWriter.#xml(_ExcelWriter.#links(
+        ...sheets.map((_, i) => [`${LINKS}/worksheet`, `worksheets/sheet${i + 1}.xml`]),
+        [`${LINKS}/styles`, "styles.xml"],
+        [`${LINKS}/sharedStrings`, "sharedStrings.xml"]
+      )),
+      "xl/styles.xml": _ExcelWriter.#xml(STYLES),
+      "xl/sharedStrings.xml": _ExcelWriter.#xml(this.#stringTable())
+    };
+    sheets.forEach(([, xml], i) => {
+      parts[`xl/worksheets/sheet${i + 1}.xml`] = _ExcelWriter.#xml(xml);
+    });
+    if (image) {
+      parts["xl/worksheets/_rels/sheet2.xml.rels"] = _ExcelWriter.#xml(_ExcelWriter.#links([`${LINKS}/drawing`, "../drawings/drawing1.xml"]));
+      parts["xl/drawings/drawing1.xml"] = _ExcelWriter.#xml(_ExcelWriter.#drawing(image, scale));
+      parts["xl/drawings/_rels/drawing1.xml.rels"] = _ExcelWriter.#xml(_ExcelWriter.#links([`${LINKS}/image`, "../media/image1.png"]));
+      parts["xl/media/image1.png"] = [image, { level: 0 }];
+    }
+    return new Blob([_fflate.zipSync.call(void 0, parts)], { type: TYPE });
+  }
+  static #xml(text) {
+    return [_fflate.strToU8.call(void 0, text), { level: 6 }];
+  }
+  static #types(sheets) {
+    const override = (part, type) => `<Override PartName="/${part}" ContentType="${type}+xml"/>`;
+    const sheetParts = Array.from({ length: sheets }, (_, i) => override(`xl/worksheets/sheet${i + 1}.xml`, `${CONTENT}.spreadsheetml.worksheet`));
+    return `${HEAD}<Types xmlns="${PACKAGE}/content-types"><Default Extension="rels" ContentType="application/vnd.openxmlformats-package.relationships+xml"/><Default Extension="xml" ContentType="application/xml"/><Default Extension="png" ContentType="image/png"/>` + override("xl/workbook.xml", `${CONTENT}.spreadsheetml.sheet.main`) + sheetParts.join("") + override("xl/styles.xml", `${CONTENT}.spreadsheetml.styles`) + override("xl/sharedStrings.xml", `${CONTENT}.spreadsheetml.sharedStrings`) + (sheets > 1 ? override("xl/drawings/drawing1.xml", `${CONTENT}.drawing`) : "") + "</Types>";
+  }
+  static #links(...targets) {
+    const links = targets.map(([type, target], i) => `<Relationship Id="rId${i + 1}" Type="${type}" Target="${target}"/>`);
+    return `${HEAD}<Relationships xmlns="${PACKAGE}/relationships">${links.join("")}</Relationships>`;
+  }
+  static #book(names) {
+    const sheets = names.map((name, i) => `<sheet name="${name}" sheetId="${i + 1}" r:id="rId${i + 1}"/>`);
+    return `${HEAD}<workbook xmlns="${MAIN}" xmlns:r="${LINKS}"><bookViews><workbookView/></bookViews><sheets>${sheets.join("")}</sheets></workbook>`;
+  }
+  static #pictureSheet() {
+    return `${HEAD}<worksheet xmlns="${MAIN}" xmlns:r="${LINKS}"><sheetData/><drawing r:id="rId1"/></worksheet>`;
+  }
+  /** The element order is fixed by the schema, and Excel calls a file corrupt when it differs. */
+  #sheet({ columns, rows }) {
+    const widths = columns.map((column) => column.length + 1);
+    const header = columns.map((column, c) => this.#textCell(_ExcelWriter.#ref(c, 1), column, Style.Header));
+    const lines = [`<row r="1">${header.join("")}</row>`];
+    rows.forEach((row, r) => {
+      const number = r + 2;
+      const cells = row.slice(0, MAX_COLUMNS).map((cell, c) => {
+        if (r < MEASURED) widths[c] = Math.max(_nullishCoalesce(widths[c], () => ( 0)), _chunk753UBLV2cjs.ExportText.of(cell).length);
+        return this.#cell(_ExcelWriter.#ref(c, number), cell);
+      });
+      lines.push(`<row r="${number}">${cells.join("")}</row>`);
+    });
+    const pane = '<pane ySplit="1" topLeftCell="A2" activePane="bottomLeft" state="frozen"/><selection pane="bottomLeft" activeCell="A2" sqref="A2"/>';
+    const cols = widths.map((width, c) => `<col min="${c + 1}" max="${c + 1}" width="${Math.min(MAX_WIDTH, Math.max(MIN_WIDTH, width + 2))}" customWidth="1"/>`).join("");
+    const last = _ExcelWriter.#ref(Math.max(widths.length, 1) - 1, rows.length + 1);
+    return `${HEAD}<worksheet xmlns="${MAIN}"><dimension ref="A1:${last}"/><sheetViews><sheetView tabSelected="1" workbookViewId="0">${pane}</sheetView></sheetViews><sheetFormatPr defaultRowHeight="15"/>${cols && `<cols>${cols}</cols>`}<sheetData>${lines.join("")}</sheetData></worksheet>`;
+  }
+  #cell(ref, cell) {
+    if (typeof cell === "number") return Number.isFinite(cell) ? `<c r="${ref}"><v>${cell}</v></c>` : Number.isNaN(cell) ? "" : this.#textCell(ref, String(cell));
+    if (typeof cell === "boolean") return `<c r="${ref}" t="b"><v>${+cell}</v></c>`;
+    if (cell instanceof Date && !Number.isNaN(+cell)) return _nullishCoalesce(_ExcelWriter.#dateCell(ref, cell), () => ( this.#textCell(ref, _chunk753UBLV2cjs.ExportText.stamp(cell))));
+    const text = _chunkZ3JPIJSCcjs.ChartExporter.text(cell);
+    return text ? this.#textCell(ref, text) : "";
+  }
+  /** A date outside the range Excel can show has no serial, so it stays text. */
+  static #dateCell(ref, date) {
+    const days = (_chunk753UBLV2cjs.ExportText.wall(date) - EPOCH) / DAY;
+    const serial = days < LEAP_BUG ? days - 1 : days;
+    if (serial < 1 || serial > MAX_SERIAL) return null;
+    return `<c r="${ref}" s="${Number.isInteger(serial) ? Style.Date : Style.DateTime}"><v>${serial}</v></c>`;
+  }
+  #textCell(ref, text, style) {
+    const shown = _nullishCoalesce(style, () => ( (FORMULA.test(text) ? Style.Guarded : void 0)));
+    return `<c r="${ref}"${shown ? ` s="${shown}"` : ""} t="s"><v>${this.#string(text)}</v></c>`;
+  }
+  #string(text) {
+    this.#references++;
+    const known = this.#strings.get(text);
+    if (known !== void 0) return known;
+    const index = this.#strings.size;
+    this.#strings.set(text, index);
+    return index;
+  }
+  #stringTable() {
+    const items = [...this.#strings.keys()].map((text) => `<si><t xml:space="preserve">${_ExcelWriter.#escape(text)}</t></si>`);
+    return `${HEAD}<sst xmlns="${MAIN}" count="${this.#references}" uniqueCount="${this.#strings.size}">${items.join("")}</sst>`;
+  }
+  /** Spreadsheets read `_x0041_` in a string as "A", so a literal one has its underscore escaped the same way. */
+  static #escape(text) {
+    return _chunkZ3JPIJSCcjs.ChartExporter.writable(text.slice(0, MAX_TEXT)).replace(/_(?=x[0-9a-fA-F]{4}_)/g, "_x005F_").replace(/[&<>\r]/g, (char) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", "\r": "&#13;" })[char]);
+  }
+  static #ref(column, row) {
+    let letters = "";
+    for (let left = column + 1; left > 0; left = Math.floor((left - 1) / 26)) letters = String.fromCharCode(65 + (left - 1) % 26) + letters;
+    return `${letters}${row}`;
+  }
+  /** The size comes from the PNG's own header: width and height follow its 16-byte preamble. */
+  static #drawing(image, scale) {
+    const header = new DataView(image.buffer, image.byteOffset);
+    const cx = Math.round(header.getUint32(16) / scale * EMU_PER_PIXEL), cy = Math.round(header.getUint32(20) / scale * EMU_PER_PIXEL);
+    return `${HEAD}<xdr:wsDr xmlns:xdr="http://schemas.openxmlformats.org/drawingml/2006/spreadsheetDrawing" xmlns:a="http://schemas.openxmlformats.org/drawingml/2006/main" xmlns:r="${LINKS}"><xdr:oneCellAnchor><xdr:from><xdr:col>0</xdr:col><xdr:colOff>0</xdr:colOff><xdr:row>0</xdr:row><xdr:rowOff>0</xdr:rowOff></xdr:from><xdr:ext cx="${cx}" cy="${cy}"/><xdr:pic><xdr:nvPicPr><xdr:cNvPr id="2" name="Chart"/><xdr:cNvPicPr><a:picLocks noChangeAspect="1"/></xdr:cNvPicPr></xdr:nvPicPr><xdr:blipFill><a:blip r:embed="rId1"/><a:stretch><a:fillRect/></a:stretch></xdr:blipFill><xdr:spPr><a:xfrm><a:off x="0" y="0"/><a:ext cx="${cx}" cy="${cy}"/></a:xfrm><a:prstGeom prst="rect"><a:avLst/></a:prstGeom></xdr:spPr></xdr:pic><xdr:clientData/></xdr:oneCellAnchor></xdr:wsDr>`;
+  }
+};
+
+
+exports.ExcelWriter = ExcelWriter;

package/dist/GraphType.js

@@ -8,20 +8,15 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DivergingBarChart"] = "bar-diverging";
 	GraphType["ButterflyChart"] = "bar-butterfly";
 	GraphType["WaterfallChart"] = "bar-waterfall";
-	GraphType["MarimekkoBar"] = "bar-marimekko";
-	GraphType["HistogramBar"] = "bar-histogram";
 	GraphType["RangeBarChart"] = "bar-range";
 	GraphType["PopulationPyramid"] = "bar-population-pyramid";
-	GraphType["BulletBar"] = "bar-bullet";
 	GraphType["ProgressBars"] = "bar-progress";
 	GraphType["GroupedStackedBar"] = "bar-grouped-stacked";
 	GraphType["PercentChangeBar"] = "bar-percent-change";
 	GraphType["TripleBarOverlay"] = "bar-triple-overlay";
 	GraphType["IconlessRankBar"] = "bar-iconless-rank";
-	GraphType["ParetoBar"] = "bar-pareto";
 	GraphType["DateBarChart"] = "bar-date";
 	GraphType["FacetedBarChart"] = "bar-faceted";
-	GraphType["ErrorBarColumn"] = "bar-error";
 	GraphType["LineChart"] = "line";
 	GraphType["MultiLineChart"] = "multi-line";
 	GraphType["AreaChart"] = "area";
@@ -36,9 +31,7 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DifferenceChart"] = "difference";
 	GraphType["HorizonChart"] = "horizon";
 	GraphType["RangeAreaChart"] = "range-area";
-	GraphType["SmallMultipleLines"] = "small-multiple-lines";
 	GraphType["RidgeLines"] = "ridge-lines";
-	GraphType["ConnectedScatterTime"] = "connected-scatter-time";
 	GraphType["DualAxisChart"] = "dual-axis";
 	GraphType["FanChart"] = "fan";
 	GraphType["ThresholdAreaChart"] = "threshold-area";
@@ -48,11 +41,8 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["BubbleChart"] = "bubble-scatter";
 	GraphType["RegressionScatter"] = "regression-scatter";
 	GraphType["JitterPlot"] = "jitter-scatter";
-	GraphType["StripScatter"] = "strip-scatter";
 	GraphType["QuadrantChart"] = "quadrant-scatter";
 	GraphType["ConnectedScatter"] = "connected-scatter";
-	GraphType["HexbinScatter"] = "hexbin-scatter";
-	GraphType["GridBinScatter"] = "gridbin-scatter";
 	GraphType["RugScatter"] = "rug-scatter";
 	GraphType["MarginalScatter"] = "marginal-scatter";
 	GraphType["ErrorBarScatter"] = "errorbar-scatter";
@@ -60,12 +50,9 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["ConvexHullScatter"] = "hull-scatter";
 	GraphType["VoronoiScatter"] = "voronoi-scatter";
 	GraphType["LabelledScatter"] = "labelled-scatter";
-	GraphType["BeeswarmScatter"] = "beeswarm-scatter";
-	GraphType["ContourScatter"] = "contour-scatter";
 	GraphType["ParetoScatter"] = "pareto-scatter";
 	GraphType["DropLineScatter"] = "dropline-scatter";
 	GraphType["ChangeScatter"] = "change-scatter";
-	GraphType["SunflowerScatter"] = "sunflower-scatter";
 	GraphType["HistogramChart"] = "histogram";
 	GraphType["DensityChart"] = "density";
 	GraphType["BoxPlot"] = "box-plot";
@@ -88,7 +75,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["BackToBackHistogram"] = "back-to-back-histogram";
 	GraphType["BeanPlot"] = "bean";
 	GraphType["DensityStrip"] = "density-strip";
-	GraphType["RidgeSlabs3DChart"] = "distribution-ridgeline-3d";
 	GraphType["Violin3DChart"] = "violin-3d";
 	GraphType["CandlestickChart"] = "candlestick";
 	GraphType["OHLCChart"] = "ohlc";
@@ -113,7 +99,7 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["ReturnCalendar"] = "return-calendar";
 	GraphType["ProjectionCone"] = "projection-cone";
 	GraphType["VolatilitySurface"] = "volatility-surface";
-	GraphType["Candlestick3D"] = "candlestick-3d";
+	GraphType["RelativeStrengthRotation"] = "relative-strength-rotation";
 	GraphType["RadarLikeProfileChart"] = "comparison-profile";
 	GraphType["TableLensChart"] = "comparison-table-lens";
 	GraphType["SlopeGraphRanked"] = "comparison-slope-ranked";
@@ -121,14 +107,11 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["ErrorBarChart"] = "comparison-error-bar";
 	GraphType["EffectForestPlot"] = "comparison-forest";
 	GraphType["GaugeBarsComparison"] = "comparison-gauge-bars";
-	GraphType["SpanChart"] = "comparison-span";
 	GraphType["FloatingBarChart"] = "comparison-floating-bar";
 	GraphType["DeviationChart"] = "comparison-deviation";
 	GraphType["RangeDotChart"] = "comparison-range-dot";
 	GraphType["PairedBarChart"] = "comparison-paired-bar";
-	GraphType["SmallMultipleBars"] = "comparison-small-multiple-bars";
 	GraphType["CycleChart"] = "comparison-cycle";
-	GraphType["TrellisChart"] = "comparison-trellis";
 	GraphType["MeanLineChart"] = "comparison-mean-line";
 	GraphType["IntervalChart"] = "comparison-interval";
 	GraphType["RankedDotChart"] = "comparison-ranked-dot";
@@ -151,8 +134,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["VennDiagram"] = "venn";
 	GraphType["EulerDiagram"] = "euler";
 	GraphType["UpSetPlot"] = "upset";
-	GraphType["ConeFunnel"] = "cone-funnel";
-	GraphType["ExtrudedPieChart"] = "extruded-pie";
 	GraphType["Waffle3DChart"] = "waffle-3d";
 	GraphType["RadarChart"] = "radar";
 	GraphType["PolarAreaChart"] = "polar-area";
@@ -194,10 +175,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DecompositionTree"] = "decomposition-tree";
 	GraphType["MindMap"] = "mind-map";
 	GraphType["FishboneDiagram"] = "fishbone";
-	GraphType["TreemapSkyline3D"] = "treemap-skyline-3d";
-	GraphType["SunburstTower3D"] = "sunburst-tower-3d";
-	GraphType["ConeTree3D"] = "cone-tree-3d";
-	GraphType["SpherePack3D"] = "sphere-pack-3d";
 	GraphType["ActivityRings"] = "activity-rings";
 	GraphType["BatteryChart"] = "battery-level";
 	GraphType["BulletChart"] = "bullet";
@@ -230,7 +207,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["BurnupChart"] = "burnup";
 	GraphType["CumulativeFlowChart"] = "cumulative-flow";
 	GraphType["RoadmapChart"] = "roadmap";
-	GraphType["StreamTimeline"] = "stream-timeline";
 	GraphType["MarimekkoTime"] = "marimekko-time";
 	GraphType["PeriodicHeatmap"] = "periodic-heatmap";
 	GraphType["ChronologyChart"] = "chronology";
@@ -239,9 +215,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["LifelineChart"] = "lifeline";
 	GraphType["MilestoneTrendChart"] = "milestone-trend";
 	GraphType["CycleTimeChart"] = "cycle-time";
-	GraphType["SpiralTimeline"] = "spiral-timeline";
-	GraphType["CalendarSkylineChart"] = "calendar-skyline";
-	GraphType["ScheduleBlocksChart"] = "schedule-blocks";
 	GraphType["WordCloudChart"] = "word-cloud";
 	GraphType["PictogramChart"] = "pictogram";
 	GraphType["IsotypeChart"] = "isotype";
@@ -286,7 +259,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["AlluvialChart"] = "alluvial";
 	GraphType["ChordFlow"] = "chord-flow";
 	GraphType["ParallelSets"] = "parallel-sets";
-	GraphType["StreamFlow"] = "stream-flow";
 	GraphType["FlowMapLess"] = "flow-map-less";
 	GraphType["CircularSankey"] = "circular-sankey";
 	GraphType["RibbonFlow"] = "ribbon-flow";
@@ -295,7 +267,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DecisionTreeChart"] = "decision-tree";
 	GraphType["StateTransitionChart"] = "state-transition";
 	GraphType["SwimFlowChart"] = "swim-flow";
-	GraphType["BumpFlow"] = "bump-flow";
 	GraphType["CohortFlow"] = "cohort-flow";
 	GraphType["RetentionFlow"] = "retention-flow";
 	GraphType["ConversionFlow"] = "conversion-flow";
@@ -405,7 +376,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["HeatMapGeo"] = "heat-map-geo";
 	GraphType["ContourMap"] = "contour-map";
 	GraphType["RidgelineMap"] = "ridgeline-map";
-	GraphType["ThiessenMap"] = "thiessen-map";
 	GraphType["CartogramDorling"] = "cartogram-dorling";
 	GraphType["NonContiguousCartogram"] = "non-contiguous-cartogram";
 	GraphType["HexTileMap"] = "hex-tile-map";
@@ -421,6 +391,7 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DrillDownMap"] = "drill-down-map";
 	GraphType["SlippyPointMap"] = "slippy-point-map";
 	GraphType["SlippyRegionMap"] = "slippy-region-map";
+	GraphType["FloorPlanMap"] = "floor-plan-map";
 	GraphType["FlowMap"] = "flow-map";
 	GraphType["ConnectionMap"] = "connection-map";
 	GraphType["GreatCircleArcMap"] = "great-circle-arc-map";
@@ -503,8 +474,6 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["SetRelationChart"] = "set-relation";
 	GraphType["CobwebPlot"] = "cobweb";
 	GraphType["TaylorSeriesChart"] = "taylor-series";
-	GraphType["StrangeAttractor3D"] = "strange-attractor-3d";
-	GraphType["ParametricSurface3D"] = "parametric-surface-3d";
 	GraphType["WaveformChart"] = "signal-waveform";
 	GraphType["OscilloscopeChart"] = "signal-oscilloscope";
 	GraphType["StemSignalChart"] = "signal-stem";
@@ -512,21 +481,16 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["TimeDomainDiffChart"] = "signal-time-domain-diff";
 	GraphType["SpectrumChart"] = "signal-spectrum";
 	GraphType["PeriodogramChart"] = "signal-periodogram";
-	GraphType["SignalSpectrogramChart"] = "signal-spectrogram";
 	GraphType["WaterfallSpectrum"] = "signal-waterfall-spectrum";
 	GraphType["WaterfallSurface3DChart"] = "signal-waterfall-3d";
 	GraphType["WaveletScalogram"] = "signal-wavelet-scalogram";
 	GraphType["CepstrumChart"] = "signal-cepstrum";
-	GraphType["CorrelogramChart"] = "signal-correlogram";
 	GraphType["ImpulseResponseChart"] = "signal-impulse-response";
 	GraphType["FilterResponseChart"] = "signal-filter-response";
-	GraphType["PoleZeroChart"] = "signal-pole-zero";
 	GraphType["AudiogramChart"] = "signal-audiogram";
 	GraphType["SeismogramChart"] = "signal-seismogram";
 	GraphType["ECGChart"] = "signal-ecg";
 	GraphType["LogicAnalyzerChart"] = "signal-logic-analyzer";
-	GraphType["EyeDiagramChart"] = "signal-eye-diagram";
-	GraphType["ConstellationChart"] = "signal-constellation";
 	GraphType["PhaseSpaceChart"] = "signal-phase-space";
 	GraphType["PhaseSpace3DChart"] = "signal-phase-space-3d";
 	GraphType["MassiveScatterChart"] = "massive-scatter";
@@ -536,6 +500,7 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["SparkBar"] = "spark-bar";
 	GraphType["CircosPlot"] = "circos-plot";
 	GraphType["GenomeIdeogram"] = "genome-ideogram";
+	GraphType["HovmollerDiagram"] = "hovmoller-diagram";
 	GraphType["Hydrograph"] = "hydrograph";
 	GraphType["TernaryContour"] = "ternary-contour";
 	GraphType["LexisDiagram"] = "lexis-diagram";
@@ -544,6 +509,27 @@ var GraphType = /* @__PURE__ */ function(GraphType) {
 	GraphType["DependencyMatrix"] = "dependency-structure-matrix";
 	GraphType["UmlClassDiagram"] = "uml-class-diagram";
 	GraphType["MareyChart"] = "marey-train-graph";
+	GraphType["LogicGateDiagram"] = "logic-gate-diagram";
+	GraphType["EntityRelationshipDiagram"] = "entity-relationship-diagram";
+	GraphType["ArchitectureDiagram"] = "architecture-diagram";
+	GraphType["NetworkTopologyDiagram"] = "network-topology-diagram";
+	GraphType["SequenceDiagram"] = "uml-sequence-diagram";
+	GraphType["AttentionHeatmap"] = "attention-heatmap";
+	GraphType["LearningCurveChart"] = "learning-curve";
+	GraphType["ElbowPlot"] = "elbow-plot";
+	GraphType["DecisionBoundaryChart"] = "decision-boundary";
+	GraphType["FeatureImportanceChart"] = "feature-importance";
+	GraphType["PartialDependencePlot"] = "partial-dependence";
+	GraphType["SwotMatrix"] = "swot-matrix";
+	GraphType["RaciMatrix"] = "raci-matrix";
+	GraphType["NpsGauge"] = "nps-gauge";
+	GraphType["VanWestendorpChart"] = "van-westendorp";
+	GraphType["AnsoffMatrix"] = "ansoff-matrix";
+	GraphType["PerceptualMap"] = "perceptual-map";
+	GraphType["MaPlot"] = "ma-plot";
+	GraphType["OncoPrint"] = "oncoprint";
+	GraphType["PedigreeChart"] = "pedigree";
+	GraphType["RamachandranPlot"] = "ramachandran-plot";
 	GraphType["Bar3DChart"] = "bar-3d";
 	GraphType["Cylinder3DBars"] = "cylinder-3d-bars";
 	GraphType["Stacked3DBars"] = "stacked-3d-bars";