minerva-design 1.0.2 → 1.2.0

package/dist/native/source/components/Chart/theme.ts

@@ -0,0 +1,16 @@
+import type { ChartThemeInput } from "../../../charts/src/canvas.js";
+import type { ResolvedTokens } from "../../../../core/index.js";
+
+/**
+ * Theme of the chart engine from the resolved design tokens of the closest
+ * `MinervaProvider`: every token becomes the CSS variable the web charts
+ * read (`--surface-color`, `--text-color`, `--primary-color`,
+ * `--chart-series-1`...), so light / dark modes, palettes and overrides
+ * apply, and `var(--x)` colors of the options resolve.
+ */
+export function chartThemeInput(tokens: ResolvedTokens): ChartThemeInput {
+  const variables: Record<string, string> = {};
+  for (const [name, value] of Object.entries(tokens.css))
+    variables[`--${name}`] = value;
+  return { variables };
+}

package/dist/native/source/components/Chart/types.ts

@@ -0,0 +1,194 @@
+import type { ReactNode, Ref } from "react";
+import type { DimensionValue, StyleProp, ViewStyle } from "react-native";
+import type {
+  ChartAnnotation,
+  ChartAxisOptions,
+  ChartController,
+  ChartHoverEvent,
+  ChartInteractionOptions,
+  ChartLegendOptions,
+  ChartPadding,
+  ChartPlotClickEvent,
+  ChartRect,
+  ChartSeries,
+  ChartTooltipOptions,
+  ChartView,
+  QuadrantConfig,
+  QuadrantCorner,
+  QuadrantPoint,
+} from "../../../charts/src/canvas.js";
+
+export type {
+  ChartAnnotation,
+  ChartAxisOptions,
+  ChartAxisType,
+  ChartColumnData,
+  ChartDragEvent,
+  ChartHoverEvent,
+  ChartHoverItem,
+  ChartInteractionOptions,
+  ChartLabelPosition,
+  ChartLegendOptions,
+  ChartLineAnnotation,
+  ChartPadding,
+  ChartPlotClickEvent,
+  ChartPointDatum,
+  ChartRect,
+  ChartRectAnnotation,
+  ChartSeries,
+  ChartSeriesData,
+  ChartSeriesType,
+  ChartTextAnnotation,
+  ChartTooltipOptions,
+  ChartView,
+  ChartXValue,
+  QuadrantAxisLabels,
+  QuadrantConfig,
+  QuadrantCorner,
+  QuadrantPoint,
+  QuadrantRegion,
+  QuadrantRegions,
+} from "../../../charts/src/canvas.js";
+
+/** Imperative handle of the chart components (`ref`) */
+export interface ChartHandle {
+  /** Shows the whole data range */
+  resetZoom(): void;
+  /** Visible range */
+  getView(): ChartView | null;
+  /** Sets the visible range */
+  setView(view: Partial<ChartView>): void;
+  /** Plot area in pixels of the chart (`null` before the first layout) */
+  getPlotRect(): ChartRect | null;
+  /** The platform-free chart controller (scene, gestures, pixel <-> data) */
+  getController(): ChartController | null;
+}
+
+/** Props shared by every chart component */
+export interface ChartCommonProps {
+  /**
+   * Height of the chart (the legend included)
+   * @default 320
+   */
+  height?: DimensionValue;
+  /**
+   * Width of the chart
+   * @default "100%"
+   */
+  width?: DimensionValue;
+  /** X axis */
+  xAxis?: ChartAxisOptions;
+  /** Y axis */
+  yAxis?: ChartAxisOptions;
+  /** Legend; shown by default when several series have a name (tap toggles a series) */
+  legend?: boolean | ChartLegendOptions;
+  /** Tooltip shown on tap / while scrubbing; `false` disables it */
+  tooltip?: boolean | ChartTooltipOptions;
+  /** Vertical guide line following the finger */
+  crosshair?: boolean;
+  /** Background areas, reference lines and texts */
+  annotations?: readonly ChartAnnotation[];
+  /**
+   * Pinch to zoom, drag to pan when zoomed, double tap to reset; `false` makes the chart static
+   * @default true
+   */
+  interaction?: boolean | ChartInteractionOptions;
+  /** Space around the plot area, in pixels */
+  padding?: ChartPadding;
+  /** Series colors (defaults to the `chart-series-1..8` tokens, then the theme colors) */
+  palette?: readonly string[];
+  /** Accessible name of the chart */
+  ariaLabel?: string;
+  /** Called when the highlighted points change */
+  onHover?: (event: ChartHoverEvent | null) => void;
+  /** Called when a point (or bar) is tapped */
+  onPointClick?: (event: ChartHoverEvent) => void;
+  /** Called when the plot area is tapped where there is no point */
+  onPlotClick?: (event: ChartPlotClickEvent) => void;
+  /** React content of the tooltip (replaces the default content) */
+  renderTooltip?: (event: ChartHoverEvent) => ReactNode;
+  /** Called when the user zooms or pans */
+  onZoom?: (view: ChartView) => void;
+  /** Styles of the root view */
+  style?: StyleProp<ViewStyle>;
+  /** Test identifier of the root view */
+  testID?: string;
+  /** Imperative handle */
+  ref?: Ref<ChartHandle>;
+}
+
+/** Props of Chart: any mix of line, area, bar and scatter series */
+export interface ChartProps extends ChartCommonProps {
+  /** Data series; each sets its own `type` */
+  series: readonly ChartSeries[];
+}
+
+/** Props of LineChart */
+export interface LineChartProps extends ChartCommonProps {
+  /** Series drawn as lines (or areas with `area`) unless they set a `type` */
+  series: readonly ChartSeries[];
+  /**
+   * Fills the area under the lines
+   * @default false
+   */
+  area?: boolean;
+}
+
+/** Props of BarChart */
+export interface BarChartProps extends ChartCommonProps {
+  /** Series drawn as bars unless they set a `type` (e.g. a `line` overlay) */
+  series: readonly ChartSeries[];
+  /**
+   * Stacks the bars of every series (otherwise they are grouped side by side)
+   * @default false
+   */
+  stacked?: boolean;
+}
+
+/** Props of ScatterChart */
+export interface ScatterChartProps extends ChartCommonProps {
+  /** Series drawn as dots unless they set a `type` */
+  series: readonly ChartSeries[];
+}
+
+/** Where a dragged QuadrantChart point was dropped */
+export interface QuadrantDropTarget {
+  /** Data coordinates of the drop */
+  x: number;
+  y: number;
+  /** Quadrant of the drop, as seen on screen */
+  quadrant: QuadrantCorner;
+}
+
+/** Props of QuadrantChart */
+export interface QuadrantChartProps
+  extends
+    Omit<
+      ChartCommonProps,
+      "onPointClick" | "onPlotClick" | "renderTooltip" | "xAxis" | "yAxis"
+    >,
+    QuadrantConfig {
+  /** Called with the tapped point and its index */
+  onPointClick?: (point: QuadrantPoint, index: number) => void;
+  /** Called when the empty area of a quadrant is tapped */
+  onQuadrantClick?: (
+    quadrant: QuadrantCorner,
+    position: { x: number; y: number },
+  ) => void;
+  /**
+   * Called when a dragged point is released; the dots become draggable
+   * when it is set (the chart does not move them: update `points`)
+   */
+  onPointDrop?: (
+    point: QuadrantPoint,
+    index: number,
+    target: QuadrantDropTarget,
+  ) => void;
+  /** React content of the tooltip of a point */
+  renderTooltip?: (point: QuadrantPoint, index: number) => ReactNode;
+  /**
+   * React content placed over each quadrant (e.g. an add button); the
+   * content receives touches, the rest of the quadrant does not
+   */
+  quadrantContent?: Partial<Record<QuadrantCorner, ReactNode>>;
+}

package/dist/native/source/index.ts

@@ -74,3 +74,4 @@ export * from "./components/TimePicker";
 
 export * from "./components/Parts";
 export * from "./components/HtmlPreview";
+export * from "./components/Chart";

package/dist/native/source/manifest.ts

@@ -234,6 +234,20 @@ export const NATIVE_COMPONENTS: readonly NativeComponent[] = [
   { name: "SelectSeparator", contract: "SelectSeparator" },
 ];
 
+/**
+ * The chart components (@minerva/charts engine drawn with views). Not
+ * component contracts: the charts have no counterpart in the web contract
+ * matrix (minerva-design/charts is a separate entry), so they are listed
+ * apart and stay out of the generated contracts / support matrix.
+ */
+export const NATIVE_CHARTS: readonly string[] = [
+  "Chart",
+  "LineChart",
+  "BarChart",
+  "ScatterChart",
+  "QuadrantChart",
+];
+
 /** Native component of a contract (by contract name) */
 export const nativeComponentOf = (
   contract: string,

package/dist/taro/charts.d.ts

@@ -0,0 +1,144 @@
+import { CSSProperties } from 'react';
+import { CanvasChartInstance, ChartAnnotation, ChartAxisOptions, ChartHoverEvent, ChartInteractionOptions, ChartLegendOptions, ChartPadding, ChartPlotClickEvent, ChartSeries, ChartTooltipOptions, ChartView, QuadrantConfig, QuadrantCorner, QuadrantPoint } from '../charts/core.js';
+export type { CanvasChartInstance, ChartAnnotation, ChartAxisOptions, ChartDragEvent, ChartHoverEvent, ChartHoverItem, ChartInteractionOptions, ChartLegendOptions, ChartOptions, ChartPadding, ChartPlotClickEvent, ChartSeries, ChartThemeInput, ChartTooltipOptions, ChartView, QuadrantAxisLabels, QuadrantConfig, QuadrantCorner, QuadrantPoint, QuadrantRegion, QuadrantRegions, } from '../charts/core.js';
+/** Imperative handle of the chart components (`ref`) */
+export interface ChartHandle {
+    /** Shows the whole data range */
+    resetZoom(): void;
+    /** Visible range, `null` until the canvas is ready */
+    getView(): ChartView | null;
+    /** Sets the visible range */
+    setView(view: Partial<ChartView>): void;
+    /** The underlying canvas chart, `null` until the canvas is ready */
+    getInstance(): CanvasChartInstance | null;
+    /** Measures the canvas again (e.g. after it was shown in a hidden tab) */
+    resize(): void;
+}
+/** Props shared by every chart component */
+export interface ChartCommonProps {
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 320
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /** X axis */
+    xAxis?: ChartAxisOptions;
+    /** Y axis */
+    yAxis?: ChartAxisOptions;
+    /** Legend; shown by default when several series have a name (tap toggles a series) */
+    legend?: boolean | ChartLegendOptions;
+    /** Tooltip; `false` disables it */
+    tooltip?: boolean | ChartTooltipOptions;
+    /** Vertical guide line following the finger */
+    crosshair?: boolean;
+    /** Background areas and reference lines */
+    annotations?: readonly ChartAnnotation[];
+    /**
+     * Pinch zoom, pan (drag when zoomed) and double-tap reset; `false` makes the chart static
+     * @default true
+     */
+    interaction?: boolean | ChartInteractionOptions;
+    /** Space around the plot area, in pixels */
+    padding?: ChartPadding;
+    /** Series colors (defaults to the `--chart-series-1..8` tokens, then the theme colors) */
+    palette?: readonly string[];
+    /** Accessible name of the chart */
+    ariaLabel?: string;
+    /**
+     * Keeps the page from scrolling while a finger moves on the chart
+     * (needed to pan a zoomed chart or drag points)
+     * @default false
+     */
+    disableScroll?: boolean;
+    /** Called when the touched (or hovered) points change */
+    onHover?: (event: ChartHoverEvent | null) => void;
+    /** Called when a point (or bar) is tapped */
+    onPointClick?: (event: ChartHoverEvent) => void;
+    /** Called when the plot area is tapped where there is no point */
+    onPlotClick?: (event: ChartPlotClickEvent) => void;
+    /** Called when the user zooms or pans */
+    onZoom?: (view: ChartView) => void;
+    /** Additional class name of the root element */
+    className?: string;
+    /** Inline styles of the root element */
+    style?: CSSProperties;
+    /** Id of the `<Canvas>` (generated by default) */
+    id?: string;
+}
+/** Props of Chart: any mix of line, area, bar and scatter series */
+export interface ChartProps extends ChartCommonProps {
+    /** Data series; each sets its own `type` */
+    series: readonly ChartSeries[];
+}
+/** Props of LineChart */
+export interface LineChartProps extends ChartCommonProps {
+    /** Series drawn as lines (or areas with `area`) unless they set a `type` */
+    series: readonly ChartSeries[];
+    /**
+     * Fills the area under the lines
+     * @default false
+     */
+    area?: boolean;
+}
+/** Props of BarChart */
+export interface BarChartProps extends ChartCommonProps {
+    /** Series drawn as bars unless they set a `type` (e.g. a `line` overlay) */
+    series: readonly ChartSeries[];
+    /**
+     * Stacks the bars of every series (otherwise they are grouped side by side)
+     * @default false
+     */
+    stacked?: boolean;
+}
+/** Props of ScatterChart */
+export interface ScatterChartProps extends ChartCommonProps {
+    /** Series drawn as dots unless they set a `type` */
+    series: readonly ChartSeries[];
+}
+/** Where a dragged QuadrantChart point was dropped */
+export interface QuadrantDropTarget {
+    /** Data coordinates of the drop */
+    x: number;
+    y: number;
+    /** Quadrant of the drop, as seen on screen */
+    quadrant: QuadrantCorner;
+}
+/** Props of QuadrantChart */
+export interface QuadrantChartProps extends Omit<ChartCommonProps, "onPointClick" | "onPlotClick" | "xAxis" | "yAxis" | "disableScroll">, QuadrantConfig {
+    /** Called with the tapped point and its index */
+    onPointClick?: (point: QuadrantPoint, index: number) => void;
+    /** Called when the empty area of a quadrant is tapped */
+    onQuadrantClick?: (quadrant: QuadrantCorner, position: {
+        x: number;
+        y: number;
+    }) => void;
+    /**
+     * Called when a dragged point is released; the dots become draggable
+     * when it is set (the chart does not move them: update `points`)
+     */
+    onPointDrop?: (point: QuadrantPoint, index: number, target: QuadrantDropTarget) => void;
+    /**
+     * Keeps the page from scrolling while a finger moves on the chart
+     * @default draggable
+     */
+    disableScroll?: boolean;
+}
+/** Chart mixing line, area, bar and scatter series (each sets its `type`) */
+export declare const Chart: import('react').ForwardRefExoticComponent<ChartProps & import('react').RefAttributes<ChartHandle>>;
+/** Line (or area) chart */
+export declare const LineChart: import('react').ForwardRefExoticComponent<LineChartProps & import('react').RefAttributes<ChartHandle>>;
+/** Bar chart: grouped side by side, or stacked */
+export declare const BarChart: import('react').ForwardRefExoticComponent<BarChartProps & import('react').RefAttributes<ChartHandle>>;
+/** Scatter chart: zooms on both axes */
+export declare const ScatterChart: import('react').ForwardRefExoticComponent<ScatterChartProps & import('react').RefAttributes<ChartHandle>>;
+/**
+ * Four-quadrant matrix (priority matrix, Eisenhower, BCG, ...): tinted
+ * quadrants with titles, dividers, and labelled dots placed without
+ * overlapping labels. Dots can be dragged to another quadrant.
+ */
+export declare const QuadrantChart: import('react').ForwardRefExoticComponent<QuadrantChartProps & import('react').RefAttributes<ChartHandle>>;

package/dist/taro/index.d.ts

@@ -6,3 +6,4 @@ export * from './display.js';
 export * from './data.js';
 export * from './theme.js';
 export * from './date-picker.js';
+export * from './charts.js';