minerva-design 1.0.2 → 1.2.0

package/dist/uni/QuadrantChart.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { computed, getCurrentInstance, useSlots } from "vue";
+import {
+  quadrantChartOptions,
+  quadrantOf,
+  type ChartHoverEvent,
+  type ChartRect,
+  type ChartView,
+  type QuadrantCorner,
+  type QuadrantPoint,
+} from "./charts-canvas.js";
+import {
+  chartCommonProps,
+  quadrantChartProps,
+  type QuadrantDropTarget,
+} from "./chart-types.js";
+import { chartEngineOptions, plain, useCanvasChart } from "./chart-canvas.js";
+const props = defineProps({ ...chartCommonProps, ...quadrantChartProps });
+const emit = defineEmits<{
+  hover: [event: ChartHoverEvent | null];
+  pointClick: [point: QuadrantPoint, index: number];
+  quadrantClick: [quadrant: QuadrantCorner, position: { x: number; y: number }];
+  pointDrop: [point: QuadrantPoint, index: number, target: QuadrantDropTarget];
+  zoom: [view: ChartView];
+}>();
+defineSlots<{
+  topLeft?: () => unknown;
+  topRight?: () => unknown;
+  bottomLeft?: () => unknown;
+  bottomRight?: () => unknown;
+}>();
+const slots = useSlots();
+const instance = getCurrentInstance();
+// Dots are draggable by default as soon as a pointDrop listener is set
+const draggable = () => props.draggable ?? !!instance?.vnode.props?.onPointDrop;
+const geometry = () => ({
+  xDomain: props.xDomain,
+  yDomain: props.yDomain,
+  xSplit: props.xSplit,
+  ySplit: props.ySplit,
+  reverseX: props.reverseX,
+});
+const {
+  id,
+  root,
+  plot,
+  rootStyle,
+  handle,
+  onTouchStart,
+  onTouchMove,
+  onTouchEnd,
+  onTouchCancel,
+} = useCanvasChart(
+  () => props,
+  () =>
+    quadrantChartOptions(
+      {
+        points: plain(props.points),
+        xDomain: plain(props.xDomain),
+        yDomain: plain(props.yDomain),
+        xSplit: props.xSplit,
+        ySplit: props.ySplit,
+        quadrants: plain(props.quadrants),
+        xLabel: props.xLabel,
+        yLabel: props.yLabel,
+        axisLabels: plain(props.axisLabels),
+        showTicks: props.showTicks,
+        reverseX: props.reverseX,
+        showLabels: props.showLabels,
+        pointSize: props.pointSize,
+        name: props.name,
+        draggable: draggable(),
+      },
+      chartEngineOptions(props, []),
+    ),
+  {
+    hover: (event) => emit("hover", event),
+    click: (event) => {
+      const index = event.items[0]?.index;
+      if (index !== undefined && props.points[index])
+        emit("pointClick", props.points[index], index);
+    },
+    plotClick: (at) =>
+      emit("quadrantClick", quadrantOf(geometry(), at.x, at.y), at),
+    drop: (event) => {
+      const index = event.item.index;
+      if (!props.points[index]) return;
+      emit("pointDrop", props.points[index], index, {
+        x: event.x,
+        y: event.y,
+        quadrant: quadrantOf(geometry(), event.x, event.y),
+      });
+    },
+    zoom: (view) => emit("zoom", view),
+  },
+);
+const scrollLocked = computed(() => props.disableScroll ?? draggable());
+
+const px = (value: number) => `${value}px`;
+const cornerStyle = (
+  corner: QuadrantCorner,
+  rect: ChartRect,
+  split: { x: number; y: number },
+) => {
+  const left = corner.endsWith("Left");
+  const top = corner.startsWith("top");
+  return [
+    "position: absolute",
+    `left: ${px(left ? rect.x : split.x)}`,
+    `top: ${px(top ? rect.y : split.y)}`,
+    `width: ${px(left ? split.x - rect.x : rect.x + rect.width - split.x)}`,
+    `height: ${px(top ? split.y - rect.y : rect.y + rect.height - split.y)}`,
+    "pointer-events: none",
+  ].join("; ");
+};
+// Areas of the quadrant slots, over the canvas
+const corners = computed(() => {
+  const rect = plot.value;
+  if (
+    !rect ||
+    !(slots.topLeft || slots.topRight || slots.bottomLeft || slots.bottomRight)
+  )
+    return null;
+  const [x0, x1] = props.xDomain ?? [0, 10];
+  const [y0, y1] = props.yDomain ?? [0, 10];
+  const fx = ((props.xSplit ?? (x0 + x1) / 2) - x0) / (x1 - x0 || 1);
+  const fy = ((props.ySplit ?? (y0 + y1) / 2) - y0) / (y1 - y0 || 1);
+  const split = {
+    x: rect.x + rect.width * (props.reverseX ? 1 - fx : fx),
+    y: rect.y + rect.height * (1 - fy),
+  };
+  return {
+    topLeft: cornerStyle("topLeft", rect, split),
+    topRight: cornerStyle("topRight", rect, split),
+    bottomLeft: cornerStyle("bottomLeft", rect, split),
+    bottomRight: cornerStyle("bottomRight", rect, split),
+  };
+});
+defineExpose(handle);
+</script>
+<template>
+  <view
+    ref="root"
+    class="mn-chart mn-uni-chart mn-uni-quadrant-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
+      v-if="corners && slots.topLeft"
+      class="mn-chart-quadrant mn-chart-quadrant-topLeft"
+      :style="corners.topLeft"
+      ><view class="mn-chart-quadrant-content" style="pointer-events: auto"
+        ><slot name="topLeft" /></view></view
+    ><view
+      v-if="corners && slots.topRight"
+      class="mn-chart-quadrant mn-chart-quadrant-topRight"
+      :style="corners.topRight"
+      ><view class="mn-chart-quadrant-content" style="pointer-events: auto"
+        ><slot name="topRight" /></view></view
+    ><view
+      v-if="corners && slots.bottomLeft"
+      class="mn-chart-quadrant mn-chart-quadrant-bottomLeft"
+      :style="corners.bottomLeft"
+      ><view class="mn-chart-quadrant-content" style="pointer-events: auto"
+        ><slot name="bottomLeft" /></view></view
+    ><view
+      v-if="corners && slots.bottomRight"
+      class="mn-chart-quadrant mn-chart-quadrant-bottomRight"
+      :style="corners.bottomRight"
+      ><view class="mn-chart-quadrant-content" style="pointer-events: auto"
+        ><slot name="bottomRight" /></view></view
+  ></view>
+</template>

package/dist/uni/QuadrantChart.vue.d.ts

@@ -0,0 +1,173 @@
+import { type ChartHoverEvent, type ChartView, type QuadrantPoint } from "./charts-canvas.js";
+import { type QuadrantDropTarget } from "./chart-types.js";
+type __VLS_Slots = {
+    topLeft?: () => unknown;
+    topRight?: () => unknown;
+    bottomLeft?: () => unknown;
+    bottomRight?: () => unknown;
+};
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    points: {
+        readonly type: import("vue").PropType<readonly QuadrantPoint[]>;
+        readonly required: true;
+    };
+    xDomain: import("vue").PropType<[number, number]>;
+    yDomain: import("vue").PropType<[number, number]>;
+    xSplit: NumberConstructor;
+    ySplit: NumberConstructor;
+    quadrants: import("vue").PropType<import("./charts-canvas.js").QuadrantRegions>;
+    xLabel: StringConstructor;
+    yLabel: StringConstructor;
+    axisLabels: import("vue").PropType<import("./charts-canvas.js").QuadrantAxisLabels>;
+    showTicks: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    reverseX: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    showLabels: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    pointSize: NumberConstructor;
+    name: StringConstructor;
+    draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    crosshair: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    annotations: import("vue").PropType<readonly import("./charts-canvas.js").ChartAnnotation[]>;
+    interaction: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartInteractionOptions>;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, import("./chart-types.js").ChartHandle, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    zoom: (view: ChartView) => any;
+    hover: (event: ChartHoverEvent | null) => any;
+    pointClick: (point: QuadrantPoint, index: number) => any;
+    quadrantClick: (quadrant: keyof import("./charts-canvas.js").QuadrantRegions, position: {
+        x: number;
+        y: number;
+    }) => any;
+    pointDrop: (point: QuadrantPoint, index: number, target: QuadrantDropTarget) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    points: {
+        readonly type: import("vue").PropType<readonly QuadrantPoint[]>;
+        readonly required: true;
+    };
+    xDomain: import("vue").PropType<[number, number]>;
+    yDomain: import("vue").PropType<[number, number]>;
+    xSplit: NumberConstructor;
+    ySplit: NumberConstructor;
+    quadrants: import("vue").PropType<import("./charts-canvas.js").QuadrantRegions>;
+    xLabel: StringConstructor;
+    yLabel: StringConstructor;
+    axisLabels: import("vue").PropType<import("./charts-canvas.js").QuadrantAxisLabels>;
+    showTicks: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    reverseX: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    showLabels: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    pointSize: NumberConstructor;
+    name: StringConstructor;
+    draggable: {
+        readonly type: BooleanConstructor;
+        readonly default: undefined;
+    };
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    crosshair: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    annotations: import("vue").PropType<readonly import("./charts-canvas.js").ChartAnnotation[]>;
+    interaction: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartInteractionOptions>;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onZoom?: ((view: ChartView) => any) | undefined;
+    onHover?: ((event: ChartHoverEvent | null) => any) | undefined;
+    onPointClick?: ((point: QuadrantPoint, index: number) => any) | undefined;
+    onQuadrantClick?: ((quadrant: keyof import("./charts-canvas.js").QuadrantRegions, position: {
+        x: number;
+        y: number;
+    }) => any) | undefined;
+    onPointDrop?: ((point: QuadrantPoint, index: number, target: QuadrantDropTarget) => any) | undefined;
+}>, {
+    legend: boolean | import("./charts-canvas.js").ChartLegendOptions;
+    width: string | number;
+    height: string | number;
+    showLabels: boolean;
+    tooltip: boolean | import("./charts-canvas.js").ChartTooltipOptions;
+    crosshair: boolean;
+    interaction: boolean | import("./charts-canvas.js").ChartInteractionOptions;
+    disableScroll: boolean;
+    showTicks: boolean;
+    reverseX: boolean;
+    draggable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/uni/ScatterChart.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import {
+  scatterSeries,
+  type ChartHoverEvent,
+  type ChartPlotClickEvent,
+  type ChartView,
+} from "./charts-canvas.js";
+import {
+  chartAxisProps,
+  chartCommonProps,
+  chartSeriesProps,
+} from "./chart-types.js";
+import {
+  chartEngineOptions,
+  plainSeries,
+  useCanvasChart,
+} from "./chart-canvas.js";
+const props = defineProps({
+  ...chartCommonProps,
+  ...chartAxisProps,
+  ...chartSeriesProps,
+});
+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,
+  () => chartEngineOptions(props, scatterSeries(plainSeries(props.series))),
+  {
+    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>

package/dist/uni/ScatterChart.vue.d.ts

@@ -0,0 +1,100 @@
+import { type ChartHoverEvent, type ChartPlotClickEvent, type ChartView } from "./charts-canvas.js";
+declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    series: {
+        readonly type: import("vue").PropType<readonly import("./charts-canvas.js").ChartSeries[]>;
+        readonly required: true;
+    };
+    xAxis: import("vue").PropType<import("./charts-canvas.js").ChartAxisOptions>;
+    yAxis: import("vue").PropType<import("./charts-canvas.js").ChartAxisOptions>;
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    crosshair: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    annotations: import("vue").PropType<readonly import("./charts-canvas.js").ChartAnnotation[]>;
+    interaction: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartInteractionOptions>;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>, import("./chart-types.js").ChartHandle, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    zoom: (view: ChartView) => any;
+    hover: (event: ChartHoverEvent | null) => any;
+    plotClick: (event: ChartPlotClickEvent) => any;
+    pointClick: (event: ChartHoverEvent) => any;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    series: {
+        readonly type: import("vue").PropType<readonly import("./charts-canvas.js").ChartSeries[]>;
+        readonly required: true;
+    };
+    xAxis: import("vue").PropType<import("./charts-canvas.js").ChartAxisOptions>;
+    yAxis: import("vue").PropType<import("./charts-canvas.js").ChartAxisOptions>;
+    height: {
+        type: import("vue").PropType<number | string>;
+        default: number;
+    };
+    width: {
+        type: import("vue").PropType<number | string>;
+        default: string;
+    };
+    legend: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartLegendOptions>;
+        default: undefined;
+    };
+    tooltip: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartTooltipOptions>;
+        default: undefined;
+    };
+    crosshair: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    annotations: import("vue").PropType<readonly import("./charts-canvas.js").ChartAnnotation[]>;
+    interaction: {
+        type: import("vue").PropType<boolean | import("./charts-canvas.js").ChartInteractionOptions>;
+        default: undefined;
+    };
+    padding: import("vue").PropType<import("./charts-canvas.js").ChartPadding>;
+    palette: import("vue").PropType<readonly string[]>;
+    ariaLabel: StringConstructor;
+    disableScroll: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{
+    onZoom?: ((view: ChartView) => any) | undefined;
+    onHover?: ((event: ChartHoverEvent | null) => any) | undefined;
+    onPlotClick?: ((event: ChartPlotClickEvent) => any) | undefined;
+    onPointClick?: ((event: ChartHoverEvent) => any) | undefined;
+}>, {
+    legend: boolean | import("./charts-canvas.js").ChartLegendOptions;
+    width: string | number;
+    height: string | number;
+    tooltip: boolean | import("./charts-canvas.js").ChartTooltipOptions;
+    crosshair: boolean;
+    interaction: boolean | import("./charts-canvas.js").ChartInteractionOptions;
+    disableScroll: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/uni/chart-canvas.d.ts

@@ -0,0 +1,68 @@
+import { type ComputedRef } from "vue";
+import { type DesignOptions, type Palette } from "../core/index.js";
+import { type ChartAnnotation, type ChartAxisOptions, type ChartControllerEventMap, type ChartInteractionOptions, type ChartLegendOptions, type ChartOptions, type ChartPadding, type ChartRect, type ChartSeries, type ChartTooltipOptions } from "./charts-canvas.js";
+import type { ChartHandle } from "./chart-types.js";
+interface ChartConfiguration {
+    mode?: string;
+    theme?: unknown;
+    palette?: Palette | null;
+    design?: DesignOptions;
+}
+/** Minerva token values (`--name` keys) of the provider configuration */
+export declare function chartThemeVariables(config?: ChartConfiguration | null): Readonly<Record<string, string>>;
+/**
+ * Raw copy of a small option value: reading it through the props tracks
+ * nested changes, and the engine receives plain objects (functions and
+ * typed arrays are kept as is).
+ */
+export declare function plain<T>(value: T): T;
+/**
+ * Series with their `data` untouched (never traversed: large data sets stay
+ * cheap, and the engine keeps its cache while the array is the same).
+ */
+export declare function plainSeries(series: readonly ChartSeries[] | undefined): ChartSeries[];
+/** Option props shared by the chart components */
+export interface ChartOptionProps {
+    xAxis?: ChartAxisOptions;
+    yAxis?: ChartAxisOptions;
+    legend?: boolean | ChartLegendOptions;
+    tooltip?: boolean | ChartTooltipOptions;
+    crosshair?: boolean;
+    annotations?: readonly ChartAnnotation[];
+    interaction?: boolean | ChartInteractionOptions;
+    padding?: ChartPadding;
+    palette?: readonly string[];
+    ariaLabel?: string;
+}
+/** Engine options of the props (like `engineOptions` of the web charts) */
+export declare function chartEngineOptions(props: ChartOptionProps, series: readonly ChartSeries[]): ChartOptions;
+export interface CanvasChartFrame {
+    width?: number | string;
+    height?: number | string;
+}
+export type CanvasChartListeners = {
+    [K in "hover" | "click" | "plotClick" | "zoom" | "drop"]?: (event: ChartControllerEventMap[K]) => void;
+};
+interface TouchLike {
+    x?: number;
+    y?: number;
+    clientX?: number;
+    clientY?: number;
+    identifier?: number;
+}
+interface TouchEventLike {
+    touches?: ArrayLike<TouchLike>;
+    changedTouches?: ArrayLike<TouchLike>;
+}
+export declare function useCanvasChart(frame: () => CanvasChartFrame, options: () => ChartOptions, listeners: CanvasChartListeners): {
+    id: string;
+    root: import("vue").Ref<unknown, unknown>;
+    plot: import("vue").ShallowRef<ChartRect | null, ChartRect | null>;
+    rootStyle: ComputedRef<string>;
+    handle: ChartHandle;
+    onTouchStart: (event: TouchEventLike) => void;
+    onTouchMove: (event: TouchEventLike) => void;
+    onTouchEnd: (event: TouchEventLike) => void;
+    onTouchCancel: (event: TouchEventLike) => void;
+};
+export {};