semiotic 2.0.2 → 3.0.0-beta.1

package/dist/charts/ordinal/BarChart.d.ts

@@ -0,0 +1,119 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * BarChart component props
+ */
+export interface BarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points. Each point should have a category and value.
+     * @example
+     * ```ts
+     * [{category: 'A', value: 10}, {category: 'B', value: 20}]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access category values
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access numeric values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Chart orientation
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Label for the category axis
+     */
+    categoryLabel?: string;
+    /**
+     * Label for the value axis
+     */
+    valueLabel?: string;
+    /**
+     * Format function for value axis tick labels
+     */
+    valueFormat?: (d: number | string) => string;
+    /**
+     * Field name or function to determine bar color
+     * @example
+     * ```ts
+     * colorBy="category"  // Use category field
+     * colorBy={d => d.value > 10 ? 'green' : 'red'}  // Use function
+     * ```
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Sort bars by value
+     * @default false
+     * @example
+     * ```ts
+     * sort="asc"  // Ascending
+     * sort="desc"  // Descending
+     * sort={true}  // Descending (default)
+     * sort={(a, b) => a.value - b.value}  // Custom function
+     * ```
+     */
+    sort?: boolean | "asc" | "desc" | ((a: Record<string, any>, b: Record<string, any>) => number);
+    /**
+     * Padding between bars (in pixels)
+     * @default 5
+     */
+    barPadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show grid lines
+     * @default false
+     */
+    showGrid?: boolean;
+    /**
+     * Show legend
+     * @default true (when colorBy is specified)
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     * @see https://semiotic.nteract.io/guides/ordinal-frame
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * BarChart - Visualize categorical data with bars.
+ *
+ * A simplified wrapper around OrdinalFrame for creating bar charts.
+ *
+ * @example
+ * ```tsx
+ * <BarChart
+ *   data={[
+ *     {category: 'A', value: 10},
+ *     {category: 'B', value: 20},
+ *     {category: 'C', value: 15}
+ *   ]}
+ *   categoryLabel="Category"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+export declare function BarChart<TDatum extends Record<string, any> = Record<string, any>>(props: BarChartProps<TDatum>): React.JSX.Element;

package/dist/charts/ordinal/BoxPlot.d.ts

@@ -0,0 +1,125 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * BoxPlot component props
+ */
+export interface BoxPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points with category and value.
+     * @example
+     * ```ts
+     * [
+     *   {category: 'Group A', value: 10},
+     *   {category: 'Group A', value: 12},
+     *   {category: 'Group A', value: 15},
+     *   {category: 'Group B', value: 20}
+     * ]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access category values
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access numeric values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Chart orientation
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Label for the category axis
+     */
+    categoryLabel?: string;
+    /**
+     * Label for the value axis
+     */
+    valueLabel?: string;
+    /**
+     * Format function for value axis tick labels
+     */
+    valueFormat?: (d: number | string) => string;
+    /**
+     * Field name or function to determine box color
+     * @example
+     * ```ts
+     * colorBy="category"
+     * colorBy={d => d.group}
+     * ```
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Show outlier points
+     * @default true
+     */
+    showOutliers?: boolean;
+    /**
+     * Outlier point radius
+     * @default 3
+     */
+    outlierRadius?: number;
+    /**
+     * Padding between categories (in pixels)
+     * @default 20
+     */
+    categoryPadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show grid lines
+     * @default false
+     */
+    showGrid?: boolean;
+    /**
+     * Show legend
+     * @default true (when colorBy is specified)
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     * @see https://semiotic.nteract.io/guides/ordinal-frame
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * BoxPlot - Visualize statistical distributions with box-and-whisker plots.
+ *
+ * A simplified wrapper around OrdinalFrame for creating box plots.
+ *
+ * @example
+ * ```tsx
+ * <BoxPlot
+ *   data={[
+ *     {category: 'Group A', value: 10},
+ *     {category: 'Group A', value: 12},
+ *     {category: 'Group A', value: 15},
+ *     {category: 'Group A', value: 18},
+ *     {category: 'Group B', value: 20},
+ *     {category: 'Group B', value: 22}
+ *   ]}
+ *   categoryLabel="Group"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+export declare function BoxPlot<TDatum extends Record<string, any> = Record<string, any>>(props: BoxPlotProps<TDatum>): React.JSX.Element;

package/dist/charts/ordinal/DonutChart.d.ts

@@ -0,0 +1,95 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * DonutChart component props
+ */
+export interface DonutChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points, one per slice.
+     * @example
+     * ```ts
+     * [{category: 'A', value: 30}, {category: 'B', value: 50}, {category: 'C', value: 20}]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access slice labels
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access slice values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Inner radius in pixels. Controls the donut hole size.
+     * @default 60
+     */
+    innerRadius?: number;
+    /**
+     * Content to render in the center of the donut (e.g. a total label)
+     */
+    centerContent?: React.ReactNode;
+    /**
+     * Field name or function to determine slice color
+     * @default categoryAccessor
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Starting angle offset in degrees
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Padding between slices (in pixels)
+     * @default 2
+     */
+    slicePadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * DonutChart - Visualize proportions as slices of a ring.
+ *
+ * A simplified wrapper around OrdinalFrame with radial projection and
+ * an inner radius to create a donut shape.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     {category: 'A', value: 30},
+ *     {category: 'B', value: 50},
+ *     {category: 'C', value: 20}
+ *   ]}
+ *   innerRadius={80}
+ *   centerContent={<span>Total: 100</span>}
+ * />
+ * ```
+ */
+export declare function DonutChart<TDatum extends Record<string, any> = Record<string, any>>(props: DonutChartProps<TDatum>): React.JSX.Element;

package/dist/charts/ordinal/DotPlot.d.ts

@@ -0,0 +1,128 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * DotPlot component props
+ */
+export interface DotPlotProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points with category and value.
+     * @example
+     * ```ts
+     * [
+     *   {category: 'Item A', value: 25},
+     *   {category: 'Item B', value: 40},
+     *   {category: 'Item C', value: 15}
+     * ]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access category values
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access numeric values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Chart orientation
+     * @default "horizontal"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Label for the category axis
+     */
+    categoryLabel?: string;
+    /**
+     * Label for the value axis
+     */
+    valueLabel?: string;
+    /**
+     * Format function for value axis tick labels
+     */
+    valueFormat?: (d: number | string) => string;
+    /**
+     * Field name or function to determine dot color
+     * @example
+     * ```ts
+     * colorBy="type"
+     * colorBy={d => d.value > 20 ? 'high' : 'low'}
+     * ```
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Sort categories by value
+     * @default true
+     * @example
+     * ```ts
+     * sort="asc"  // Ascending
+     * sort="desc"  // Descending
+     * sort={true}  // Descending (default)
+     * sort={(a, b) => a.value - b.value}  // Custom function
+     * ```
+     */
+    sort?: boolean | "asc" | "desc" | ((a: Record<string, any>, b: Record<string, any>) => number);
+    /**
+     * Dot radius
+     * @default 5
+     */
+    dotRadius?: number;
+    /**
+     * Padding between categories (in pixels)
+     * @default 10
+     */
+    categoryPadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show grid lines
+     * @default true
+     */
+    showGrid?: boolean;
+    /**
+     * Show legend
+     * @default true (when colorBy is specified)
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     * @see https://semiotic.nteract.io/guides/ordinal-frame
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * DotPlot - Visualize categorical data with Cleveland dot plots.
+ *
+ * A simplified wrapper around OrdinalFrame for creating dot plots.
+ *
+ * @example
+ * ```tsx
+ * <DotPlot
+ *   data={[
+ *     {category: 'Item A', value: 25},
+ *     {category: 'Item B', value: 40},
+ *     {category: 'Item C', value: 15}
+ *   ]}
+ *   categoryLabel="Items"
+ *   valueLabel="Value"
+ * />
+ * ```
+ */
+export declare function DotPlot<TDatum extends Record<string, any> = Record<string, any>>(props: DotPlotProps<TDatum>): React.JSX.Element;

package/dist/charts/ordinal/GroupedBarChart.d.ts

@@ -0,0 +1,113 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * GroupedBarChart component props
+ */
+export interface GroupedBarChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points with category, group, and value.
+     * @example
+     * ```ts
+     * [
+     *   {category: 'Q1', product: 'A', value: 100},
+     *   {category: 'Q1', product: 'B', value: 150},
+     *   {category: 'Q2', product: 'A', value: 120},
+     *   {category: 'Q2', product: 'B', value: 180}
+     * ]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access category values
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access group values (for grouping bars side by side)
+     */
+    groupBy: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access numeric values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Chart orientation
+     * @default "vertical"
+     */
+    orientation?: "vertical" | "horizontal";
+    /**
+     * Label for the category axis
+     */
+    categoryLabel?: string;
+    /**
+     * Label for the value axis
+     */
+    valueLabel?: string;
+    /**
+     * Format function for value axis tick labels
+     */
+    valueFormat?: (d: number | string) => string;
+    /**
+     * Field name or function to determine bar color
+     * @default groupBy value
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Padding between bar groups (in pixels)
+     * @default 5
+     */
+    barPadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show grid lines
+     * @default false
+     */
+    showGrid?: boolean;
+    /**
+     * Show legend for groups
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * GroupedBarChart - Visualize comparisons across categories with side-by-side bars.
+ *
+ * A simplified wrapper around OrdinalFrame using clusterbar type.
+ *
+ * @example
+ * ```tsx
+ * <GroupedBarChart
+ *   data={[
+ *     {category: 'Q1', product: 'A', value: 100},
+ *     {category: 'Q1', product: 'B', value: 150},
+ *     {category: 'Q2', product: 'A', value: 120},
+ *     {category: 'Q2', product: 'B', value: 180}
+ *   ]}
+ *   groupBy="product"
+ *   categoryLabel="Quarter"
+ *   valueLabel="Sales"
+ * />
+ * ```
+ */
+export declare function GroupedBarChart<TDatum extends Record<string, any> = Record<string, any>>(props: GroupedBarChartProps<TDatum>): React.JSX.Element;

package/dist/charts/ordinal/PieChart.d.ts

@@ -0,0 +1,83 @@
+import * as React from "react";
+import type { OrdinalFrameProps } from "../../types/ordinalTypes";
+import type { BaseChartProps, ChartAccessor } from "../shared/types";
+import { type TooltipProp } from "../../Tooltip/Tooltip";
+/**
+ * PieChart component props
+ */
+export interface PieChartProps<TDatum extends Record<string, any> = Record<string, any>> extends BaseChartProps {
+    /**
+     * Array of data points, one per slice.
+     * @example
+     * ```ts
+     * [{category: 'A', value: 30}, {category: 'B', value: 50}, {category: 'C', value: 20}]
+     * ```
+     */
+    data: TDatum[];
+    /**
+     * Field name or function to access slice labels
+     * @default "category"
+     */
+    categoryAccessor?: ChartAccessor<TDatum, string>;
+    /**
+     * Field name or function to access slice values
+     * @default "value"
+     */
+    valueAccessor?: ChartAccessor<TDatum, number>;
+    /**
+     * Field name or function to determine slice color
+     * @default categoryAccessor
+     */
+    colorBy?: ChartAccessor<TDatum, string>;
+    /**
+     * Color scheme for categorical data or custom colors array
+     * @default "category10"
+     */
+    colorScheme?: string | string[];
+    /**
+     * Starting angle offset in degrees
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Padding between slices (in pixels)
+     * @default 2
+     */
+    slicePadding?: number;
+    /**
+     * Enable hover annotations
+     * @default true
+     */
+    enableHover?: boolean;
+    /**
+     * Show legend
+     * @default true
+     */
+    showLegend?: boolean;
+    /**
+     * Tooltip configuration
+     */
+    tooltip?: TooltipProp;
+    /**
+     * Additional OrdinalFrame props for advanced customization
+     * For full control, consider using OrdinalFrame directly
+     */
+    frameProps?: Partial<Omit<OrdinalFrameProps, "data" | "size">>;
+}
+/**
+ * PieChart - Visualize proportions as slices of a circle.
+ *
+ * A simplified wrapper around OrdinalFrame with radial projection.
+ *
+ * @example
+ * ```tsx
+ * <PieChart
+ *   data={[
+ *     {category: 'A', value: 30},
+ *     {category: 'B', value: 50},
+ *     {category: 'C', value: 20}
+ *   ]}
+ * />
+ * ```
+ */
+export declare function PieChart<TDatum extends Record<string, any> = Record<string, any>>(props: PieChartProps<TDatum>): React.JSX.Element;