@graphysdk/react-renderer 1.8.1-beta.1786348404060 → 1.8.1-beta.1786352280463

package/dist/editable.d.ts

@@ -27,7 +27,13 @@ import { TextContent } from '@graphysdk/viz-engine';
 import { TextMeasurer } from '@graphysdk/viz-engine';
 import { TooltipContent } from '@graphysdk/viz-engine';
 
-/** Both axes, each switched on and off from its own header. */
+/**
+ * How round the chart's frame is, and how it pushes back the marks a highlight leaves out. The
+ * highlight row is inert until something adds a highlight.
+ */
+export declare const AppearanceSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
+/** Both axes, each switched on and off from within its own section. */
 export declare const AxesPanel: ({ children, ...rootProps }: PanelProps) => JSX.Element;
 
 /**
@@ -41,20 +47,14 @@ declare interface AxisLabelSlotProps {
 }
 
 /**
- * One axis: whether it is drawn and where, how its labels read, and — when it carries a value scale —
- * how that scale is transformed and where its domain starts and stops.
+ * One axis, and the scale it carries.
  *
- * Which rows appear follows the axis rather than a chart-type name. A discrete axis draws its whole
- * domain, so it offers only its side. A value axis offers labels, a side and its domain; and because
- * bars stand on a baseline, a value axis their bars anchor to can only grow from zero, so it drops
- * the scale transform and the start and keeps only where it ends.
- *
- * Which axis is `x` and which is `y` stays as mapped however the chart is drawn: a flipped coordinate
- * system turns a column chart on its side without moving the value scale off y.
+ * `x` and `y` stay as mapped however the chart is drawn: a flipped coord system turns a column chart
+ * on its side without moving the value scale off y.
  */
 export declare const AxisSection: ({ axis, title, layout, preview }: AxisSectionProps) => JSX.Element | null;
 
-declare interface AxisSectionProps extends OverridableSectionProps {
+export declare interface AxisSectionProps extends OverridableSectionProps {
     /** Which axis this section edits. */
     axis: PrimaryAxisTarget;
 }
@@ -69,6 +69,14 @@ declare interface AxisTicksSlotProps {
     tickRects: Partial<Record<LayoutEdge, Rect>>;
 }
 
+/**
+ * A bar's own shape: how thick it is and how round its corners are.
+ *
+ * No gap row: painted width is `step × (1 - scalePadding) × width / seriesCount`, so band padding and
+ * this fraction shrink the group the same way.
+ */
+export declare const BarSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
 /**
  * How the badge paints at the current frame size:
  * - `full` — glyph + "Made with Graphy" pill
@@ -269,13 +277,46 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "Graph type";
                 };
+                readonly polarSection: {
+                    readonly title: "Polar";
+                    readonly innerRadius: "Inner radius";
+                    readonly startAngle: "Start angle";
+                };
+                readonly barSection: {
+                    readonly title: "Bars";
+                    readonly thickness: "Bar thickness";
+                    readonly rounding: "Rounding";
+                    readonly roundingOptions: {
+                        readonly none: "None";
+                        readonly xs: "XS";
+                        readonly sm: "S";
+                        readonly md: "M";
+                        readonly lg: "L";
+                        readonly xl: "XL";
+                        readonly full: "Full";
+                    };
+                };
                 readonly graphOptionsSection: {
                     readonly title: "Graph options";
                 };
+                readonly gridSection: {
+                    readonly title: "Grid";
+                    readonly horizontalGridLines: "Horizontal lines";
+                    readonly verticalGridLines: "Vertical lines";
+                    readonly rings: "Rings";
+                    readonly spokes: "Spokes";
+                    readonly gridStyle: "Grid style";
+                    readonly gridThickness: "Grid thickness";
+                    readonly lineStyles: {
+                        readonly solid: "Solid";
+                        readonly dashed: "Dashed";
+                        readonly dotted: "Dotted";
+                    };
+                };
                 readonly graphOptions: {
                     readonly sortBars: "Sort high → low";
-                    readonly gridLines: "Grid lines";
                     readonly showPoints: "Show points";
+                    readonly lineFill: "Fill under line";
                     readonly smoothLines: "Smooth lines";
                     readonly stackTotals: "Stack totals";
                     readonly dataLabels: "Data labels";
@@ -290,6 +331,19 @@ declare const dictionaries: {
                     readonly left: "Left";
                     readonly right: "Right";
                     readonly none: "None";
+                    readonly alignLabel: "Alignment";
+                    readonly align: {
+                        readonly auto: "Auto";
+                        readonly start: "Start";
+                        readonly center: "Center";
+                        readonly end: "End";
+                    };
+                    readonly displayLabel: "Style";
+                    readonly display: {
+                        readonly auto: "Auto";
+                        readonly pill: "Pills";
+                        readonly direct: "Direct";
+                    };
                 };
                 readonly numberFormatSection: {
                     readonly title: "Number format";
@@ -339,8 +393,8 @@ declare const dictionaries: {
                         readonly first: "First";
                         readonly previous: "Previous";
                     };
-                    readonly pieTotalPosition: {
-                        readonly left: "Left";
+                    readonly position: {
+                        readonly above: "Above";
                         readonly center: "Center";
                     };
                 };
@@ -390,7 +444,9 @@ declare const dictionaries: {
                     readonly yAxis: "Y-axis";
                 };
                 readonly controls: {
+                    readonly title: "Title";
                     readonly visible: "Visible";
+                    readonly ticks: "Ticks";
                     readonly labels: "Labels";
                     readonly position: "Position";
                     readonly scale: "Scale";
@@ -437,6 +493,10 @@ declare const dictionaries: {
                 readonly themeSection: {
                     readonly title: "Theme";
                 };
+                readonly appearanceSection: {
+                    readonly title: "Appearance";
+                    readonly highlightStyle: "Highlight";
+                };
                 readonly paletteSection: {
                     readonly title: "Palette";
                     readonly colorScheme: "Color scheme";
@@ -1055,13 +1115,46 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "نوع الرسم البياني";
                 };
+                readonly polarSection: {
+                    readonly title: "قطبي";
+                    readonly innerRadius: "نصف القطر الداخلي";
+                    readonly startAngle: "زاوية البداية";
+                };
+                readonly barSection: {
+                    readonly title: "الأعمدة";
+                    readonly thickness: "سمك العمود";
+                    readonly rounding: "التدوير";
+                    readonly roundingOptions: {
+                        readonly none: "بلا";
+                        readonly xs: "XS";
+                        readonly sm: "S";
+                        readonly md: "M";
+                        readonly lg: "L";
+                        readonly xl: "XL";
+                        readonly full: "كامل";
+                    };
+                };
                 readonly graphOptionsSection: {
                     readonly title: "خيارات الرسم البياني";
                 };
+                readonly gridSection: {
+                    readonly title: "الشبكة";
+                    readonly horizontalGridLines: "خطوط أفقية";
+                    readonly verticalGridLines: "خطوط رأسية";
+                    readonly rings: "حلقات";
+                    readonly spokes: "أشعة";
+                    readonly gridStyle: "نمط الشبكة";
+                    readonly gridThickness: "سمك الشبكة";
+                    readonly lineStyles: {
+                        readonly solid: "متصل";
+                        readonly dashed: "متقطع";
+                        readonly dotted: "منقط";
+                    };
+                };
                 readonly graphOptions: {
                     readonly sortBars: "ترتيب من الأعلى ← الأدنى";
-                    readonly gridLines: "خطوط الشبكة";
                     readonly showPoints: "إظهار النقاط";
+                    readonly lineFill: "تعبئة تحت الخط";
                     readonly smoothLines: "خطوط ناعمة";
                     readonly stackTotals: "مجاميع المكدس";
                     readonly dataLabels: "تسميات البيانات";
@@ -1076,6 +1169,19 @@ declare const dictionaries: {
                     readonly left: "يسار";
                     readonly right: "يمين";
                     readonly none: "بدون";
+                    readonly alignLabel: "المحاذاة";
+                    readonly align: {
+                        readonly auto: "تلقائي";
+                        readonly start: "البداية";
+                        readonly center: "الوسط";
+                        readonly end: "النهاية";
+                    };
+                    readonly displayLabel: "النمط";
+                    readonly display: {
+                        readonly auto: "تلقائي";
+                        readonly pill: "شارات";
+                        readonly direct: "على الرسم";
+                    };
                 };
                 readonly numberFormatSection: {
                     readonly title: "تنسيق الأرقام";
@@ -1125,8 +1231,8 @@ declare const dictionaries: {
                         readonly first: "الأول";
                         readonly previous: "السابق";
                     };
-                    readonly pieTotalPosition: {
-                        readonly left: "يسار";
+                    readonly position: {
+                        readonly above: "أعلى";
                         readonly center: "وسط";
                     };
                 };
@@ -1176,7 +1282,9 @@ declare const dictionaries: {
                     readonly yAxis: "المحور الصادي";
                 };
                 readonly controls: {
+                    readonly title: "العنوان";
                     readonly visible: "مرئي";
+                    readonly ticks: "العلامات";
                     readonly labels: "التسميات";
                     readonly position: "الموضع";
                     readonly scale: "المقياس";
@@ -1223,6 +1331,10 @@ declare const dictionaries: {
                 readonly themeSection: {
                     readonly title: "السمة";
                 };
+                readonly appearanceSection: {
+                    readonly title: "المظهر";
+                    readonly highlightStyle: "التمييز";
+                };
                 readonly paletteSection: {
                     readonly title: "لوحة الألوان";
                     readonly colorScheme: "نظام الألوان";
@@ -1840,13 +1952,46 @@ declare const dictionaries: {
                 readonly graphTypeSection: {
                     readonly title: "Tipo de gráfico";
                 };
+                readonly polarSection: {
+                    readonly title: "Polar";
+                    readonly innerRadius: "Raio interno";
+                    readonly startAngle: "Ângulo inicial";
+                };
+                readonly barSection: {
+                    readonly title: "Barras";
+                    readonly thickness: "Espessura da barra";
+                    readonly rounding: "Arredondamento";
+                    readonly roundingOptions: {
+                        readonly none: "Nenhum";
+                        readonly xs: "XS";
+                        readonly sm: "S";
+                        readonly md: "M";
+                        readonly lg: "L";
+                        readonly xl: "XL";
+                        readonly full: "Total";
+                    };
+                };
                 readonly graphOptionsSection: {
                     readonly title: "Opções do gráfico";
                 };
+                readonly gridSection: {
+                    readonly title: "Grelha";
+                    readonly horizontalGridLines: "Linhas horizontais";
+                    readonly verticalGridLines: "Linhas verticais";
+                    readonly rings: "Anéis";
+                    readonly spokes: "Raios";
+                    readonly gridStyle: "Estilo da grelha";
+                    readonly gridThickness: "Espessura da grelha";
+                    readonly lineStyles: {
+                        readonly solid: "Sólida";
+                        readonly dashed: "Tracejada";
+                        readonly dotted: "Pontilhada";
+                    };
+                };
                 readonly graphOptions: {
                     readonly sortBars: "Ordenar maior → menor";
-                    readonly gridLines: "Linhas de grelha";
                     readonly showPoints: "Mostrar pontos";
+                    readonly lineFill: "Preencher sob a linha";
                     readonly smoothLines: "Linhas suaves";
                     readonly stackTotals: "Totais sobrepostos";
                     readonly dataLabels: "Etiquetas de dados";
@@ -1861,6 +2006,19 @@ declare const dictionaries: {
                     readonly left: "Esquerda";
                     readonly right: "Direita";
                     readonly none: "Nenhuma";
+                    readonly alignLabel: "Alinhamento";
+                    readonly align: {
+                        readonly auto: "Automático";
+                        readonly start: "Início";
+                        readonly center: "Centro";
+                        readonly end: "Fim";
+                    };
+                    readonly displayLabel: "Estilo";
+                    readonly display: {
+                        readonly auto: "Automático";
+                        readonly pill: "Etiquetas";
+                        readonly direct: "No gráfico";
+                    };
                 };
                 readonly numberFormatSection: {
                     readonly title: "Formato numérico";
@@ -1910,8 +2068,8 @@ declare const dictionaries: {
                         readonly first: "Primeiro";
                         readonly previous: "Anterior";
                     };
-                    readonly pieTotalPosition: {
-                        readonly left: "Esquerda";
+                    readonly position: {
+                        readonly above: "Acima";
                         readonly center: "Centro";
                     };
                 };
@@ -1961,7 +2119,9 @@ declare const dictionaries: {
                     readonly yAxis: "Eixo Y";
                 };
                 readonly controls: {
+                    readonly title: "Título";
                     readonly visible: "Visível";
+                    readonly ticks: "Marcas";
                     readonly labels: "Etiquetas";
                     readonly position: "Posição";
                     readonly scale: "Escala";
@@ -2008,6 +2168,10 @@ declare const dictionaries: {
                 readonly themeSection: {
                     readonly title: "Tema";
                 };
+                readonly appearanceSection: {
+                    readonly title: "Aparência";
+                    readonly highlightStyle: "Destaque";
+                };
                 readonly paletteSection: {
                     readonly title: "Paleta";
                     readonly colorScheme: "Esquema de cores";
@@ -2682,13 +2846,46 @@ declare const EN_GB: {
             readonly graphTypeSection: {
                 readonly title: "Graph type";
             };
+            readonly polarSection: {
+                readonly title: "Polar";
+                readonly innerRadius: "Inner radius";
+                readonly startAngle: "Start angle";
+            };
+            readonly barSection: {
+                readonly title: "Bars";
+                readonly thickness: "Bar thickness";
+                readonly rounding: "Rounding";
+                readonly roundingOptions: {
+                    readonly none: "None";
+                    readonly xs: "XS";
+                    readonly sm: "S";
+                    readonly md: "M";
+                    readonly lg: "L";
+                    readonly xl: "XL";
+                    readonly full: "Full";
+                };
+            };
             readonly graphOptionsSection: {
                 readonly title: "Graph options";
             };
+            readonly gridSection: {
+                readonly title: "Grid";
+                readonly horizontalGridLines: "Horizontal lines";
+                readonly verticalGridLines: "Vertical lines";
+                readonly rings: "Rings";
+                readonly spokes: "Spokes";
+                readonly gridStyle: "Grid style";
+                readonly gridThickness: "Grid thickness";
+                readonly lineStyles: {
+                    readonly solid: "Solid";
+                    readonly dashed: "Dashed";
+                    readonly dotted: "Dotted";
+                };
+            };
             readonly graphOptions: {
                 readonly sortBars: "Sort high → low";
-                readonly gridLines: "Grid lines";
                 readonly showPoints: "Show points";
+                readonly lineFill: "Fill under line";
                 readonly smoothLines: "Smooth lines";
                 readonly stackTotals: "Stack totals";
                 readonly dataLabels: "Data labels";
@@ -2703,6 +2900,19 @@ declare const EN_GB: {
                 readonly left: "Left";
                 readonly right: "Right";
                 readonly none: "None";
+                readonly alignLabel: "Alignment";
+                readonly align: {
+                    readonly auto: "Auto";
+                    readonly start: "Start";
+                    readonly center: "Center";
+                    readonly end: "End";
+                };
+                readonly displayLabel: "Style";
+                readonly display: {
+                    readonly auto: "Auto";
+                    readonly pill: "Pills";
+                    readonly direct: "Direct";
+                };
             };
             readonly numberFormatSection: {
                 readonly title: "Number format";
@@ -2752,8 +2962,8 @@ declare const EN_GB: {
                     readonly first: "First";
                     readonly previous: "Previous";
                 };
-                readonly pieTotalPosition: {
-                    readonly left: "Left";
+                readonly position: {
+                    readonly above: "Above";
                     readonly center: "Center";
                 };
             };
@@ -2803,7 +3013,9 @@ declare const EN_GB: {
                 readonly yAxis: "Y-axis";
             };
             readonly controls: {
+                readonly title: "Title";
                 readonly visible: "Visible";
+                readonly ticks: "Ticks";
                 readonly labels: "Labels";
                 readonly position: "Position";
                 readonly scale: "Scale";
@@ -2850,6 +3062,10 @@ declare const EN_GB: {
             readonly themeSection: {
                 readonly title: "Theme";
             };
+            readonly appearanceSection: {
+                readonly title: "Appearance";
+                readonly highlightStyle: "Highlight";
+            };
             readonly paletteSection: {
                 readonly title: "Palette";
                 readonly colorScheme: "Color scheme";
@@ -3475,6 +3691,19 @@ declare interface GraphHandle {
  */
 declare type GraphMode = 'readonly' | 'editable';
 
+/**
+ * What a chart writes on its own marks. The grid is chrome behind them, and has its own section.
+ *
+ * Each row mirrors a condition in `runtime/data-labels/strategies/*.placement.ts` and
+ * `Geom.dataLabelCoordTypes`, so a row is only offered where the engine will draw it.
+ */
+export declare const GraphOptionsSection: ({ layerId, title, layout, preview }: GraphOptionsSectionProps) => JSX.Element | null;
+
+export declare interface GraphOptionsSectionProps extends OverridableSectionProps {
+    /** Whose labels to edit. Defaults to the first layer; a combo's bars and line each carry their own. */
+    layerId?: string;
+}
+
 /** Props for {@link GraphRenderer}: container sizing, interaction toggles and per-region slot overrides. */
 declare interface GraphRendererProps {
     /** Controls how the graph responds to its container size. Defaults to filling the parent container. */
@@ -3540,6 +3769,12 @@ declare interface GraphSlots {
     AxisLabel?: SlotOverride<AxisLabelSlotProps, (axis: FormattedAxis, ctx: SlotMeasureContext) => number>;
 }
 
+/**
+ * Visibility switches per direction, since a chart often wants horizontal rules and no vertical ones.
+ * Style and thickness stay shared: two directions styled apart read as two grids rather than one.
+ */
+export declare const GridSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
 /**
  * Props for the Grid slot, overridable via `slots.Grid` on `GraphRenderer`. `panelRect` is in
  * SVG-local coordinates.
@@ -3571,6 +3806,14 @@ declare interface HeaderSlotProps {
     brandMark: BrandMarkVisual;
 }
 
+/**
+ * The aggregate a chart states above itself.
+ *
+ * `show: 'none'` is the off state rather than a separate flag, so the *Visible* switch writes the
+ * metric.
+ */
+export declare const HeadlineSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
 /** Props for the Headline slot, overridable via `slots.Headline` on `GraphRenderer`. */
 declare interface HeadlineSlotProps {
     headline: FormattedHeadline;
@@ -3603,16 +3846,10 @@ declare interface IntroAnimationOptions {
     maxAnimatedGeoms: number;
 }
 
-/**
- * Where the legend sits relative to the chart. Renders nothing until the graph has compiled, since
- * there is no position to show before then.
- *
- * `inline` by default: a narrowed chart offers two or three positions, which fit beside the heading.
- * A host that mounts it among collapsible sections passes `layout` rather than forking the section.
- */
+/** Where the legend sits relative to the chart, and how it names its series. */
 export declare const LegendSection: ({ positions, title, layout, preview }: LegendSectionProps) => JSX.Element | null;
 
-declare interface LegendSectionProps extends OverridableSectionProps {
+export declare interface LegendSectionProps extends OverridableSectionProps {
     /** Overrides the positions offered, for a host that knows its own layout constraints. */
     positions?: readonly LegendPosition[];
 }
@@ -3624,6 +3861,12 @@ declare interface LegendSlotProps {
     textScale: number;
 }
 
+/**
+ * How a path is drawn: its points, curve, thickness and missing values. Renders nothing unless the
+ * chart holds a line or an area.
+ */
+export declare const LineSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
 declare type LocaleShape = {
     dir?: TextDirection;
 } & Dictionary<typeof EN_GB>;
@@ -3704,6 +3947,15 @@ declare type PhraseFn<P extends Record<string, unknown> = Record<string, unknown
 
 declare type PhraseOf<K extends TranslationKey> = DeepValue<typeof EN_GB, K>;
 
+/**
+ * How large a chart's authored points are drawn. Renders nothing unless a point layer is the host's
+ * own: a path's companion points are sized from the line section, under the switch that grows them.
+ */
+export declare const PointSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
+/** How big a hole a round chart has, and where its sweep begins. */
+export declare const PolarSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
+
 /**
  * A grid of picture-led choices, for settings that read faster as shapes than as words — chart
  * type, text size, a row of colour chips.
@@ -3869,12 +4121,7 @@ declare interface SlotOverride<Props, Measure> {
     measure: Measure;
 }
 
-/**
- * Whether the chart shows its source, and the attribution it names.
- *
- * The only text slot typed here rather than on the chart: a source is never editable in place, so
- * the panel is the only way to set one.
- */
+/** Whether the chart shows its source. The one text slot never editable in place on the chart. */
 export declare const SourceSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
 
 /**
@@ -3947,12 +4194,7 @@ export declare interface TextFieldControlProps extends ContinuousControlProps<st
     hasError?: boolean;
 }
 
-/**
- * How large every text element in the chart is drawn, as one multiplier over the theme's own sizes.
- *
- * It applies to ticks and labels as much as to the title, so it belongs to the chart rather than to
- * any one piece of its content.
- */
+/** How large every text element is drawn, as one multiplier over the theme's own sizes. */
 export declare const TextSizeSection: ({ title, layout, preview }: OverridableSectionProps) => JSX.Element | null;
 
 /**