Aioros.Pictor 0.1.0-preview.1

<img src="assets/icon/pictor.svg" alt="Pictor" width="72" height="72" align="right">

Aioros.Pictor

Preview. Aioros and its libraries are in preview: APIs may change between releases, and it is not yet recommended for production.

The chart library of the Aioros ecosystem: charts in pure XAML, on the web and natively, drawn by the chart engine Aioros.Graphs. Named after the Pictor constellation, the painter's easel.

Its charts follow Recharts' API and look, the reference its comparison pages measure against. Pictor is an independent port of Recharts and is not affiliated with or endorsed by the Recharts project. Recharts and recharts-scale are MIT-licensed; their notices are in THIRD-PARTY-NOTICES.md, which every package carries.

<p:LineChart Data="{Binding Sales}">
  <p:CartesianGrid StrokeDashArray="3 3" />
  <p:XAxis DataKey="Month" />
  <p:YAxis />
  <p:Tooltip />
  <p:Legend />
  <p:Line Type="Monotone" DataKey="Revenue" Stroke="#8884d8" />
</p:LineChart>

The same chart on both of Aioros's targets, with the reference's defaults:

• Web: the chart is written as Recharts' SVG markup straight into the response, per request, from the page's compiled plan, without the XAML engine and without JavaScript authored by the app. What moves in the browser is CSS or a behavior of Aioros's framework script that the chart's markup declares.
• Desktop: the same control draws itself natively through its DrawingContext, one geometry per series.

The port covers Recharts 2.15.4's whole API (docs/coverage.md: every export, prop and behavior done or not applicable, with its criteria):

• Charts: LineChart, AreaChart, BarChart, ComposedChart, ScatterChart, PieChart, RadarChart, RadialBarChart, FunnelChart, Treemap, Sankey and SunburstChart, with horizontal and vertical layouts, axes and scales, ErrorBar, ReferenceLine, ReferenceArea, ReferenceDot, Brush (with its panorama), ZAxis, Legend, Tooltip, Label, LabelList, Cell, gradients, and every reference example compared with Recharts' own render.
• Interactive on the web: tooltips, cursors and active shapes on hover, the tooltip following the pointer; touch (a finger dragged across a chart moves its tooltip) and the keyboard (AccessibilityLayer); clicks on items, legend entries and axis ticks as commands; legend toggles; the Brush's travellers and slide; a nest treemap's zoom; SyncId across charts; live charts pushed by the server. The desktop does the same natively.
• Animations: Recharts' enter animations and its update animations from the previous data to the new, on both targets, honouring reduced motion.
• A native XAML control: PictorTheme (Recharts' light theme, a dark theme, Fluent's and Semi's resources through PictorTheme.Host), resource keys overridable per app, page or chart, styles and control themes on chart elements, data binding of every property on both targets, automation peers on the desktop, and custom content (Recharts' shape, dot, tick, label, content...) as XAML DataTemplates.
• A chart that fills its parent can be laid out at several widths on the web (ResponsiveWidths), and a compiled page writes a chart again from its kept markup while its data does not change.

The Gallery is Pictor's demo: a live analytics dashboard as its home page, a page per chart family, feature pages (interactions, tooltips, themes, updates, custom content, live charts), /families with every interaction on every family, and /compare/{family} with each reference example beside Recharts' screenshot and its measured verdicts.

Performance is the point: see docs/benchmarks.md and docs/performance-history.md.

Start an app

dotnet new pictor creates an Aioros app built with Pictor: its home page is a live analytics dashboard (KPIs with sparklines, traffic compared with yesterday and a brush over it, live events, top pages, traffic sources, a conversion funnel and devices) for three dummy products, pushed by the server, on the web and the desktop:

dotnet new install Aioros.Pictor.Templates
dotnet new pictor -n Metrics
cd Metrics && aioros dev

Layout

dotnet build Aioros.Pictor.slnx -m:4
dotnet test --solution Aioros.Pictor.slnx
dotnet run --project samples/Gallery/Gallery              # the Gallery on the web, http://localhost:3010
dotnet run --project samples/Gallery/Gallery -- --desktop  # the same pages in the native window
samples/Demo/run.sh                                        # a benchmark run: the comparison page, samples/Demo/out/index.html

samples/Demo/run.sh installs tools/recharts' Node packages when they are missing, measures every example on both sides and records its raw results under bench/results (docs/benchmarks.md).

Building

Aioros and Aioros.Graphs come from nuget.org.

The SDK is Aioros's (global.json); link Aioros's repository-local SDK: ln -s ../aioros/.dotnet .dotnet.

License and attribution

MIT, as the whole Aioros ecosystem: see LICENSE. The layout follows Recharts and recharts-scale (MIT) and texts are measured with Inter's metrics (SIL OFL 1.1); their notices are in THIRD-PARTY-NOTICES.md.