minerva-design 1.3.0 → 1.4.0

package/dist/taro/manifest.d.ts

@@ -9,3 +9,4 @@ export interface TaroComponentManifestEntry {
     tests: string[];
 }
 export declare const taroComponentManifest: TaroComponentManifestEntry[];
+export declare const taroChartManifest: TaroComponentManifestEntry[];

package/dist/taro/shape-charts.d.ts

@@ -0,0 +1,537 @@
+import { CSSProperties } from 'react';
+import { BulletDatum, CalendarDate, CalendarDatum, CanvasShapeChartInstance, ChartPadding, GaugeBand, RadarIndicator, RadarSeries, RadialBarDatum, SankeyLink, SankeyNode, ShapeChartOptions, ShapeDatum, ShapeDrillEvent, ShapeHoverEvent, ShapeLegendOptions, ShapeToggleEvent, ShapeTooltipOptions, TreemapNode } from '../charts/core.js';
+export type { BulletDatum, CalendarDate, CalendarDatum, CanvasShapeChartInstance, GaugeBand, RadarIndicator, RadarSeries, RadialBarDatum, SankeyLink, SankeyNode, ShapeChartOptions, ShapeChartType, ShapeDatum, ShapeDrillEvent, ShapeHoverEvent, ShapeLegendOptions, ShapeToggleEvent, ShapeTooltipOptions, TreemapNode, } from '../charts/core.js';
+/** Imperative handle of the shape chart components (`ref`) */
+export interface ShapeChartHandle {
+    /** The underlying canvas chart (`toggle`, `getHidden`, `clearHover`...), `null` until the canvas is ready */
+    getInstance(): CanvasShapeChartInstance | null;
+    /** Measures the canvas again (e.g. after it was shown in a hidden tab) */
+    resize(): void;
+}
+/** Props of every shape chart that are not chart options */
+export interface ShapeChartFrameProps {
+    /**
+     * Height of the chart (the legend included); numbers are pixels
+     * @default 320 (GaugeChart: 240, RadialBarChart: 300, SankeyChart and SunburstChart: 360, CalendarHeatmap and BulletChart: from the data)
+     */
+    height?: number | string;
+    /**
+     * Width of the chart; numbers are pixels
+     * @default "100%"
+     */
+    width?: number | string;
+    /**
+     * Keeps the page from scrolling while a finger moves on the chart
+     * @default false
+     */
+    disableScroll?: boolean;
+    /** Called when the highlighted mark changes (tap, or the mouse on H5) */
+    onHover?: (event: ShapeHoverEvent | null) => void;
+    /** Called when a mark is tapped */
+    onClick?: (event: ShapeHoverEvent) => void;
+    /**
+     * Called when a legend item is tapped (or the instance's `toggle()` is
+     * called), with the toggled index and every hidden index after the toggle
+     */
+    onToggle?: (event: ShapeToggleEvent) => 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 shared by every named shape chart (PieChart, DonutChart, RadarChart, GaugeChart, FunnelChart, TreemapChart, SankeyChart, SunburstChart, RadialBarChart, CalendarHeatmap and BulletChart) */
+export interface ShapeChartCommonProps extends ShapeChartFrameProps {
+    /** Colors of the marks without `color` (defaults to the `--chart-series-1..8` tokens, then the theme colors) */
+    palette?: readonly string[];
+    /**
+     * Legend; tapping an item hides / shows its slice, stage, series, node, bar, row or level
+     * @default shown for pie, donut, funnel, multi-series radar charts, calendar heatmaps and radial bar charts without labels
+     */
+    legend?: boolean | ShapeLegendOptions;
+    /**
+     * Tooltip drawn on the canvas (`render` may return its text); `false` disables it
+     * @default true
+     */
+    tooltip?: boolean | ShapeTooltipOptions;
+    /**
+     * Formats the values of the labels and the tooltip
+     * @default compact numbers (1.2k, 3.4M)
+     */
+    format?: (value: number) => string;
+    /**
+     * Formats the shares (labels, conversion rates, tooltip); `share` is 0-1
+     * @default one decimal, e.g. "40.0%"
+     */
+    percentFormat?: (share: number) => string;
+    /**
+     * Hidden slices / stages / radar series / top-level treemap or sunburst
+     * nodes / sankey nodes / radial bars / bullet rows / calendar levels, by
+     * index. Makes the visibility controlled: legend taps then only call
+     * `onToggle`, whose `hiddenIndexes` should be stored and passed back.
+     */
+    hidden?: readonly number[];
+    /**
+     * Entry and update animations
+     * @default true
+     */
+    animation?: boolean;
+    /**
+     * Space around the drawing, in pixels
+     * @default 8 on every side
+     */
+    padding?: ChartPadding;
+    /**
+     * Accessible name of the chart
+     * @default the chart type, e.g. "Donut chart"
+     */
+    ariaLabel?: string;
+}
+/** Props of PieChart */
+export interface PieChartProps extends ShapeChartCommonProps {
+    /** Slices: a name, a value (negative values count as 0) and an optional color */
+    data: readonly ShapeDatum[];
+    /**
+     * Inner radius as a fraction of the outer radius: 0 = pie, 0.6 = donut
+     * @default 0
+     */
+    innerRadius?: number;
+    /**
+     * Angle of the first slice, degrees clockwise from 12 o'clock
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Gap between the slices, in pixels
+     * @default 1 (pie), 2 (donut)
+     */
+    padAngle?: number;
+    /**
+     * Corner radius of the slices, in pixels
+     * @default 0 (pie), 4 (donut)
+     */
+    cornerRadius?: number;
+    /**
+     * Nightingale rose: the radius (instead of the angle) shows the value
+     * @default false
+     */
+    rose?: boolean;
+    /**
+     * Slice labels: `outside` with leader lines, `inside` the slices, or none
+     * @default "outside" (up to 12 slices), "none" otherwise
+     */
+    labels?: "outside" | "inside" | "none";
+    /**
+     * What a label shows: name, value, percent (combinable)
+     * @default ["name", "percent"]
+     */
+    labelContent?: readonly ("name" | "value" | "percent")[];
+    /** Big text in the hole of a donut (e.g. the total) */
+    centerValue?: string;
+    /** Small text under `centerValue` */
+    centerLabel?: string;
+}
+/** Props of DonutChart: a PieChart with a hole */
+export interface DonutChartProps extends PieChartProps {
+    /**
+     * Inner radius as a fraction of the outer radius
+     * @default 0.62
+     */
+    innerRadius?: number;
+}
+/** Props of RadarChart */
+export interface RadarChartProps extends ShapeChartCommonProps {
+    /** Axes of the chart, clockwise from 12 o'clock */
+    indicators: readonly RadarIndicator[];
+    /** Polygons: one value per indicator */
+    series: readonly RadarSeries[];
+    /**
+     * Grid shape
+     * @default "polygon"
+     */
+    shape?: "polygon" | "circle";
+    /**
+     * Number of grid rings
+     * @default 4
+     */
+    levels?: number;
+    /**
+     * Dots on the vertices
+     * @default true
+     */
+    dots?: boolean;
+}
+/** Props of GaugeChart */
+export interface GaugeChartProps extends ShapeChartCommonProps {
+    /**
+     * Value shown by the arc (clamped to `min` - `max` for the drawing)
+     * @default 0
+     */
+    value?: number;
+    /**
+     * Value at the start of the arc
+     * @default 0
+     */
+    min?: number;
+    /**
+     * Value at the end of the arc
+     * @default 100
+     */
+    max?: number;
+    /** Caption under the value */
+    label?: string;
+    /**
+     * Total angle of the arc, degrees
+     * @default 240
+     */
+    sweep?: number;
+    /**
+     * Thickness of the arc as a fraction of the radius
+     * @default 0.16
+     */
+    thickness?: number;
+    /** Colored ranges of the track; the value arc takes the color of its band */
+    bands?: readonly GaugeBand[];
+    /**
+     * Color of the value arc (when there are no bands)
+     * @default the first palette color
+     */
+    color?: string;
+    /**
+     * Draws a needle in addition to the value arc
+     * @default false
+     */
+    needle?: boolean;
+    /**
+     * Tick labels at the ends (and at the band bounds)
+     * @default true
+     */
+    ticks?: boolean;
+}
+/** Props of FunnelChart */
+export interface FunnelChartProps extends ShapeChartCommonProps {
+    /** Stages: a name, a value and an optional color */
+    data: readonly ShapeDatum[];
+    /**
+     * Order of the stages
+     * @default "none" (data order)
+     */
+    sort?: "descending" | "ascending" | "none";
+    /**
+     * Vertical gap between the stages, in pixels
+     * @default 4
+     */
+    gap?: number;
+    /**
+     * Shows the conversion rate from the previous stage
+     * @default true
+     */
+    conversion?: boolean;
+    /**
+     * Shape of the stages: trapezoids that narrow to the next stage, or centered bars
+     * @default "trapezoid"
+     */
+    shape?: "trapezoid" | "bar";
+}
+/** Props of TreemapChart */
+export interface TreemapChartProps extends ShapeChartCommonProps {
+    /** Nodes: leaves carry a value, parents sum their children */
+    data: readonly TreemapNode[];
+    /**
+     * Gap between the cells, in pixels
+     * @default 2
+     */
+    gap?: number;
+    /**
+     * Draws the names of the parents above their children
+     * @default true
+     */
+    headers?: boolean;
+}
+/** Props of SankeyChart */
+export interface SankeyChartProps extends ShapeChartCommonProps {
+    /** Nodes, in their initial order; nodes only named by a link are appended */
+    nodes?: readonly SankeyNode[];
+    /** Flows between the nodes (by name or index); links closing a cycle are ignored */
+    links: readonly SankeyLink[];
+    /**
+     * Width of the node bars, in pixels
+     * @default 12
+     */
+    nodeWidth?: number;
+    /**
+     * Vertical gap between the nodes of a column, in pixels
+     * @default 12
+     */
+    nodePadding?: number;
+    /**
+     * Column of the nodes without a `column`
+     * @default "justify"
+     */
+    align?: "justify" | "left" | "right" | "center";
+    /**
+     * Relaxation passes that straighten the flows and reduce crossings
+     * @default 32
+     */
+    iterations?: number;
+    /**
+     * Color of the links without `color`
+     * @default "gradient"
+     */
+    linkColor?: "gradient" | "source" | "target" | "neutral";
+    /**
+     * Opacity of the links, 0-1
+     * @default 0.4
+     */
+    linkOpacity?: number;
+    /**
+     * Node labels (name and value); overlapping labels are skipped
+     * @default true
+     */
+    labels?: boolean;
+    /**
+     * Shows the value after the name in the labels
+     * @default true
+     */
+    labelValues?: boolean;
+}
+/** Props of SunburstChart */
+export interface SunburstChartProps extends ShapeChartCommonProps {
+    /** Nodes: leaves carry a value, parents sum their children */
+    data: readonly TreemapNode[];
+    /**
+     * Radius of the center circle as a fraction of the outer radius
+     * @default 0.26
+     */
+    innerRadius?: number;
+    /**
+     * Rings shown at once below the focused node
+     * @default every level
+     */
+    levels?: number;
+    /**
+     * Angle of the first node, degrees clockwise from 12 o'clock
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Gap between the sectors, in pixels
+     * @default 1
+     */
+    padAngle?: number;
+    /**
+     * Corner radius of the sectors, in pixels
+     * @default 2
+     */
+    cornerRadius?: number;
+    /**
+     * Sector labels
+     * @default "auto"
+     */
+    labels?: "auto" | "tangential" | "radial" | "none";
+    /**
+     * Tapping a parent zooms into it; tapping the center goes back up
+     * @default true
+     */
+    drill?: boolean;
+    /**
+     * Names from the root to the focused node (`[]` = the root). Makes the
+     * drill-down controlled: taps then only call `onDrill`.
+     */
+    drillPath?: readonly string[];
+    /** Called when a parent or the center is tapped (or the instance's `drill()` is called) */
+    onDrill?: (event: ShapeDrillEvent) => void;
+}
+/** Props of RadialBarChart */
+export interface RadialBarChartProps extends ShapeChartCommonProps {
+    /** Bars, from the outermost ring inward: a name, a value, an optional `max` and color */
+    data: readonly RadialBarDatum[];
+    /**
+     * Value of a full bar for the data without `max`
+     * @default the largest value
+     */
+    max?: number;
+    /**
+     * Radius of the innermost ring's inner edge, as a fraction of the outer radius
+     * @default 0.3
+     */
+    innerRadius?: number;
+    /**
+     * Angle where the bars start, degrees clockwise from 12 o'clock
+     * @default 0
+     */
+    startAngle?: number;
+    /**
+     * Angle of a full bar, degrees (360 = full rings)
+     * @default 270
+     */
+    sweep?: number;
+    /**
+     * Gap between the rings, as a fraction of a ring's slot (0-0.9)
+     * @default 0.28
+     */
+    gap?: number;
+    /**
+     * Background tracks behind the bars
+     * @default true
+     */
+    track?: boolean;
+    /**
+     * Rounded bar ends
+     * @default true
+     */
+    rounded?: boolean;
+    /**
+     * Labels before the start of the bars
+     * @default true when `sweep` leaves room for them (up to 300°)
+     */
+    labels?: boolean;
+    /**
+     * What a label shows: name, value, percent of the bar's max (combinable)
+     * @default ["name", "value"]
+     */
+    labelContent?: readonly ("name" | "value" | "percent")[];
+    /** Big text in the center (e.g. the overall completion) */
+    centerValue?: string;
+    /** Small text under `centerValue` */
+    centerLabel?: string;
+}
+/** Props of CalendarHeatmap */
+export interface CalendarHeatmapProps extends ShapeChartCommonProps {
+    /** Daily values (several entries of the same day add up) */
+    data: readonly CalendarDatum[];
+    /**
+     * Days shown: a year (`2026`) or an inclusive `[start, end]` range
+     * @default the 53 weeks ending on the last day of the data
+     */
+    range?: number | readonly [CalendarDate, CalendarDate];
+    /**
+     * `weeks`: a column per week and a row per weekday; `months`: a small calendar per month
+     * @default "weeks"
+     */
+    layout?: "weeks" | "months";
+    /**
+     * First day of the week, 0 = Sunday … 6 = Saturday
+     * @default from `locale`
+     */
+    weekStart?: number;
+    /**
+     * BCP 47 locale of the month and weekday names, of the tooltip dates and of the default `weekStart`
+     * @default the runtime's default locale
+     */
+    locale?: string;
+    /**
+     * Color of the highest level (lower levels are lighter)
+     * @default the first palette color
+     */
+    color?: string;
+    /** Colors of the levels, lowest first (replaces `color` and sets the number of levels) */
+    colors?: readonly string[];
+    /**
+     * Number of color levels above the empty days
+     * @default 4
+     */
+    levels?: number;
+    /** Upper bounds of the levels but the last, ascending */
+    thresholds?: readonly number[];
+    /**
+     * Gap between the cells, in pixels
+     * @default 3
+     */
+    gap?: number;
+    /**
+     * Corner radius of the cells, in pixels
+     * @default 2
+     */
+    radius?: number;
+    /**
+     * Largest cell size, in pixels (cells shrink to fit the width)
+     * @default 16 (weeks), 28 (months)
+     */
+    maxCellSize?: number;
+    /**
+     * Month names (and years) around the cells
+     * @default true
+     */
+    monthLabels?: boolean;
+    /**
+     * Weekday names beside (weeks) or above (months) the cells
+     * @default true
+     */
+    weekdayLabels?: boolean;
+}
+/** Props of BulletChart */
+export interface BulletChartProps extends ShapeChartCommonProps {
+    /** Rows (columns when vertical): name, value, target, ranges and scale */
+    data: readonly BulletDatum[];
+    /**
+     * Horizontal rows or vertical columns
+     * @default "horizontal"
+     */
+    orientation?: "horizontal" | "vertical";
+    /** Qualitative ranges of the rows without `ranges`: upper bounds, ascending */
+    ranges?: readonly number[];
+    /** Names of the qualitative ranges, lowest first (tooltip) */
+    rangeLabels?: readonly string[];
+    /** Colors of the qualitative ranges, lowest first; shades of gray by default */
+    rangeColors?: readonly string[];
+    /**
+     * Thickness of the value bar as a fraction of the ranges' thickness
+     * @default 0.4
+     */
+    barSize?: number;
+    /**
+     * Color of the target markers
+     * @default the text color
+     */
+    targetColor?: string;
+    /**
+     * Tick labels of the scales (when there is room)
+     * @default true
+     */
+    ticks?: boolean;
+}
+/** Props of ShapeChart: any shape chart type from its engine options */
+export interface ShapeChartProps extends ShapeChartFrameProps {
+    /** Options of the chart, by `type` (every shape type of the engine) */
+    options: ShapeChartOptions;
+    /** Called when a sunburst drills into a parent or back up */
+    onDrill?: (event: ShapeDrillEvent) => void;
+}
+/**
+ * Pie chart (or a donut with `innerRadius`, or a Nightingale rose with
+ * `rose`): slices with gaps, labels, legend toggles, tap to highlight
+ */
+export declare const PieChart: import('react').ForwardRefExoticComponent<PieChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Donut chart: a PieChart with a hole and optional center texts */
+export declare const DonutChart: import('react').ForwardRefExoticComponent<DonutChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Radar (spider) chart comparing series over several indicators */
+export declare const RadarChart: import('react').ForwardRefExoticComponent<RadarChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Gauge (speedometer) showing one value on an arc, with colored bands */
+export declare const GaugeChart: import('react').ForwardRefExoticComponent<GaugeChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Funnel chart of the stages of a process, with conversion rates */
+export declare const FunnelChart: import('react').ForwardRefExoticComponent<FunnelChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Treemap: nested rectangles of areas proportional to the values */
+export declare const TreemapChart: import('react').ForwardRefExoticComponent<TreemapChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/**
+ * Sankey diagram: flows between nodes in columns, link thickness
+ * proportional to the flow; tapping a node or a link highlights its flows
+ */
+export declare const SankeyChart: import('react').ForwardRefExoticComponent<SankeyChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/**
+ * Sunburst chart: a hierarchy as concentric rings; tapping a parent zooms
+ * into it, tapping the center goes back up
+ */
+export declare const SunburstChart: import('react').ForwardRefExoticComponent<SunburstChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Radial bar chart: concentric progress rings (activity rings, KPI completion) */
+export declare const RadialBarChart: import('react').ForwardRefExoticComponent<RadialBarChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Calendar heatmap: daily values on a calendar, contributions-style */
+export declare const CalendarHeatmap: import('react').ForwardRefExoticComponent<CalendarHeatmapProps & import('react').RefAttributes<ShapeChartHandle>>;
+/** Bullet chart: KPI bars against qualitative ranges and a target marker */
+export declare const BulletChart: import('react').ForwardRefExoticComponent<BulletChartProps & import('react').RefAttributes<ShapeChartHandle>>;
+/**
+ * Any shape chart from its engine options (`type`: pie, radar, gauge,
+ * funnel, treemap and the other shape types of the engine)
+ */
+export declare const ShapeChart: import('react').ForwardRefExoticComponent<ShapeChartProps & import('react').RefAttributes<ShapeChartHandle>>;

package/dist/uni/AreaChart.vue

@@ -0,0 +1,68 @@
+<script setup lang="ts">
+// Area chart: smooth by default, stacked or 100% stacked
+import { computed } from "vue";
+import type {
+  ChartHoverEvent,
+  ChartPlotClickEvent,
+  ChartView,
+} from "./charts-canvas.js";
+import {
+  areaChartProps,
+  chartAxisProps,
+  chartCommonProps,
+  chartSeriesProps,
+} from "./chart-types.js";
+import { useCanvasChart } from "./chart-canvas.js";
+import { areaChartOptions } from "./named-chart-options.js";
+const props = defineProps({
+  ...chartCommonProps,
+  ...chartAxisProps,
+  ...chartSeriesProps,
+  ...areaChartProps,
+});
+const emit = defineEmits<{
+  hover: [event: ChartHoverEvent | null];
+  pointClick: [event: ChartHoverEvent];
+  plotClick: [event: ChartPlotClickEvent];
+  zoom: [view: ChartView];
+}>();
+const {
+  id,
+  root,
+  rootStyle,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasChart(
+  () => props,
+  () => areaChartOptions(props),
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => emit("pointClick", event),
+    plotClick: (event) => emit("plotClick", event),
+    zoom: (view) => emit("zoom", view),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? false);
+defineExpose(handle);
+</script>
+<template>
+  <view ref="root" class="mn-chart mn-uni-chart" :style="rootStyle"
+    ><canvas
+      :id="id"
+      type="2d"
+      :canvas-id="id"
+      class="mn-chart-canvas"
+      :hidpi="false"
+      :disable-scroll="scrollLocked"
+      role="img"
+      :aria-label="props.ariaLabel"
+      style="display: block; width: 100%; height: 100%"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
+      @touchcancel="onTouchCancel"
+  /></view>
+</template>