@mantine-vue/charts 1.1.1

package/lib/charts.d.ts

@@ -0,0 +1,319 @@
+import type { MantineColor } from '@mantine-vue/core';
+import type { DefineComponent, HTMLAttributes, VNodeChild } from 'vue';
+import type { ChartData, ChartOptionProps, ChartRootProps, ChartSeries, GridChartBaseProps, MantineChartDotProps } from './types';
+export type LineChartCurveType = 'bump' | 'linear' | 'natural' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
+export type AreaChartCurveType = LineChartCurveType;
+export type CompositeChartCurveType = LineChartCurveType;
+export interface LineChartSeries extends ChartSeries {
+    strokeDasharray?: string | number;
+    curveType?: LineChartCurveType;
+}
+export interface AreaChartSeries extends ChartSeries {
+    color: MantineColor;
+    strokeDasharray?: string | number;
+    curveType?: AreaChartCurveType;
+}
+export interface BarChartSeries extends ChartSeries {
+    stackId?: string;
+}
+export interface CompositeChartSeries extends ChartSeries {
+    type: 'line' | 'area' | 'bar';
+    strokeDasharray?: string | number;
+}
+export interface LineChartProps extends GridChartBaseProps {
+    series: LineChartSeries[];
+    type?: 'default' | 'gradient';
+    gradientStops?: {
+        offset: number;
+        color: MantineColor;
+    }[];
+    curveType?: LineChartCurveType;
+    fillOpacity?: number;
+    withDots?: boolean;
+    dotProps?: MantineChartDotProps;
+    activeDotProps?: MantineChartDotProps;
+    strokeWidth?: number;
+    lineChartProps?: ChartOptionProps;
+    connectNulls?: boolean;
+    lineProps?: ChartOptionProps | ((series: LineChartSeries) => ChartOptionProps);
+    withPointLabels?: boolean;
+}
+export interface AreaChartProps extends GridChartBaseProps {
+    series: AreaChartSeries[];
+    type?: 'default' | 'stacked' | 'percent' | 'split';
+    withGradient?: boolean;
+    curveType?: AreaChartCurveType;
+    withDots?: boolean;
+    dotProps?: MantineChartDotProps;
+    activeDotProps?: MantineChartDotProps;
+    strokeWidth?: number;
+    areaChartProps?: ChartOptionProps;
+    fillOpacity?: number;
+    splitColors?: [MantineColor, MantineColor];
+    splitOffset?: number;
+    connectNulls?: boolean;
+    areaProps?: ChartOptionProps | ((series: AreaChartSeries) => ChartOptionProps);
+    withPointLabels?: boolean;
+}
+export interface BarChartProps extends GridChartBaseProps {
+    series: BarChartSeries[];
+    type?: 'default' | 'stacked' | 'percent' | 'waterfall';
+    fillOpacity?: number;
+    cursorFill?: MantineColor;
+    barChartProps?: ChartOptionProps;
+    barProps?: ChartOptionProps | ((series: BarChartSeries) => ChartOptionProps);
+    withBarValueLabel?: boolean;
+    valueLabelProps?: ChartOptionProps | ((series: BarChartSeries) => ChartOptionProps);
+    minBarSize?: number;
+    maxBarWidth?: number;
+    barLabelColor?: MantineColor;
+    getBarColor?: (value: number, series: BarChartSeries) => MantineColor;
+}
+export interface CompositeChartProps extends Omit<GridChartBaseProps, 'orientation'> {
+    series: CompositeChartSeries[];
+    curveType?: CompositeChartCurveType;
+    withDots?: boolean;
+    dotProps?: MantineChartDotProps;
+    activeDotProps?: MantineChartDotProps;
+    strokeWidth?: number;
+    connectNulls?: boolean;
+    lineProps?: ChartOptionProps | ((series: CompositeChartSeries) => ChartOptionProps);
+    areaProps?: ChartOptionProps | ((series: CompositeChartSeries) => ChartOptionProps);
+    barProps?: ChartOptionProps | ((series: CompositeChartSeries) => ChartOptionProps);
+    withPointLabels?: boolean;
+    withBarValueLabel?: boolean;
+    minBarSize?: number;
+    maxBarWidth?: number;
+    composedChartProps?: ChartOptionProps;
+}
+export interface PieChartCell {
+    name: string;
+    value: number;
+    color?: MantineColor;
+}
+export interface PieChartProps extends ChartRootProps {
+    data: PieChartCell[];
+    withTooltip?: boolean;
+    withLabels?: boolean;
+    withLabelsLine?: boolean;
+    labelsPosition?: 'inside' | 'outside';
+    labelsType?: 'value' | 'percent';
+    tooltipDataSource?: 'segment' | 'all';
+    valueFormatter?: (value: number) => string;
+    strokeWidth?: number;
+    size?: number;
+    startAngle?: number;
+    endAngle?: number;
+    paddingAngle?: number;
+    pieProps?: ChartOptionProps;
+    tooltipProps?: ChartOptionProps;
+}
+export interface DonutChartProps extends PieChartProps {
+    thickness?: number;
+    chartLabel?: string;
+    chartLabelColor?: MantineColor;
+    chartLabelFontSize?: number;
+    chartLabelProps?: ChartOptionProps;
+}
+export interface ScatterChartSeries extends ChartSeries {
+    data?: ChartData;
+}
+export interface ScatterChartProps extends GridChartBaseProps {
+    data: ChartData;
+    series: ScatterChartSeries[];
+    xAxisKey?: string;
+    yAxisKey?: string;
+    scatterProps?: ChartOptionProps | ((series: ScatterChartSeries) => ChartOptionProps);
+}
+export interface BubbleChartProps extends ChartRootProps {
+    data: ChartData;
+    xAxisKey?: string;
+    yAxisKey?: string;
+    zAxisKey?: string;
+    name?: string;
+    color?: MantineColor;
+    range?: number;
+    withTooltip?: boolean;
+    withXAxis?: boolean;
+    withYAxis?: boolean;
+    xAxisProps?: ChartOptionProps;
+    yAxisProps?: ChartOptionProps;
+    tooltipProps?: ChartOptionProps;
+    gridProps?: ChartOptionProps;
+    valueFormatter?: (value: number) => string;
+}
+export interface RadarChartProps extends GridChartBaseProps {
+    series: ChartSeries[];
+    maxValue?: number;
+    withPolarGrid?: boolean;
+    withAngleAxis?: boolean;
+    withRadiusAxis?: boolean;
+    shape?: 'polygon' | 'circle';
+    radarProps?: ChartOptionProps;
+}
+export interface RadialBarChartCell {
+    name: string;
+    value: number;
+    color?: MantineColor;
+}
+export interface RadialBarChartProps extends ChartRootProps {
+    data: RadialBarChartCell[];
+    maxValue?: number;
+    withLabels?: boolean;
+    withLegend?: boolean;
+    withTooltip?: boolean;
+    startAngle?: number;
+    endAngle?: number;
+    barSize?: number;
+    radialBarProps?: ChartOptionProps;
+    tooltipProps?: ChartOptionProps;
+    legendProps?: ChartOptionProps;
+}
+export interface FunnelChartCell extends PieChartCell {
+    label?: string;
+}
+export interface FunnelChartProps extends ChartRootProps {
+    data: FunnelChartCell[];
+    withTooltip?: boolean;
+    withLabels?: boolean;
+    withLegend?: boolean;
+    valueFormatter?: (value: number) => string;
+    funnelProps?: ChartOptionProps;
+    tooltipProps?: ChartOptionProps;
+}
+export interface TreemapData {
+    name: string;
+    value?: number;
+    color?: MantineColor;
+    children?: TreemapData[];
+}
+export interface TreemapProps extends ChartRootProps {
+    data: TreemapData[];
+    withTooltip?: boolean;
+    withLegend?: boolean;
+    valueFormatter?: (value: number) => string;
+    treemapProps?: ChartOptionProps;
+}
+export interface SankeyChartNode {
+    name: string;
+    color?: MantineColor;
+    [key: string]: unknown;
+}
+export interface SankeyChartLink {
+    source: string | number;
+    target: string | number;
+    value: number;
+    [key: string]: unknown;
+}
+export interface SankeyChartProps extends ChartRootProps {
+    data?: SankeyChartNode[];
+    nodes?: SankeyChartNode[];
+    links: SankeyChartLink[];
+    withTooltip?: boolean;
+    valueFormatter?: (value: number) => string;
+    sankeyProps?: ChartOptionProps;
+}
+export interface SparklineTrendColors {
+    positive: MantineColor;
+    negative: MantineColor;
+    neutral?: MantineColor;
+}
+export interface SparklineProps extends ChartRootProps {
+    data: (number | null)[];
+    color?: MantineColor;
+    withGradient?: boolean;
+    fillOpacity?: number;
+    curveType?: LineChartCurveType;
+    strokeWidth?: number;
+    trendColors?: SparklineTrendColors;
+    connectNulls?: boolean;
+    areaProps?: ChartOptionProps;
+}
+export interface HeatmapRectData {
+    date: string;
+    value: number | null;
+}
+export interface HeatmapProps extends ChartRootProps {
+    data: Record<string, number>;
+    domain?: [number, number];
+    startDate?: Date | string;
+    endDate?: Date | string;
+    withMonthLabels?: boolean;
+    monthLabels?: string[];
+    withWeekdayLabels?: boolean;
+    weekdayLabels?: string[];
+    withOutsideDates?: boolean;
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    rectSize?: number;
+    gap?: number;
+    rectRadius?: number;
+    colors?: string[];
+    weekdaysLabelsWidth?: number;
+    monthsLabelsHeight?: number;
+    fontSize?: number;
+    getTooltipLabel?: (input: HeatmapRectData) => VNodeChild;
+    withTooltip?: boolean;
+    tooltipProps?: ChartOptionProps;
+    getRectProps?: (input: HeatmapRectData) => Record<string, unknown>;
+    splitMonths?: boolean;
+    withLegend?: boolean;
+    legendLabels?: [string, string];
+}
+export interface BarsListBarData {
+    name: string;
+    value: number;
+    color?: MantineColor;
+    textColor?: MantineColor;
+    variant?: 'light' | 'filled';
+}
+export interface BarsListProps extends ChartRootProps {
+    data: BarsListBarData[];
+    valueFormatter?: (value: number) => string;
+    barsLabel?: string;
+    valueLabel?: string;
+    getBarProps?: (data: BarsListBarData) => HTMLAttributes;
+    renderBar?: (data: BarsListBarData, defaultBar: VNodeChild) => VNodeChild;
+    barGap?: string | number;
+    minBarSize?: string | number;
+    barHeight?: string | number;
+    barColor?: MantineColor;
+    barTextColor?: MantineColor;
+    autoContrast?: boolean;
+}
+type PublicComponent<P> = DefineComponent<P>;
+export declare const AreaChart: PublicComponent<AreaChartProps>;
+export declare const BarChart: PublicComponent<BarChartProps>;
+export declare const LineChart: PublicComponent<LineChartProps>;
+export declare const CompositeChart: PublicComponent<CompositeChartProps>;
+export declare const PieChart: PublicComponent<PieChartProps>;
+export declare const DonutChart: PublicComponent<DonutChartProps>;
+export declare const ScatterChart: PublicComponent<ScatterChartProps>;
+export declare const BubbleChart: PublicComponent<BubbleChartProps>;
+export declare const RadarChart: PublicComponent<RadarChartProps>;
+export declare const RadialBarChart: PublicComponent<RadialBarChartProps>;
+export declare const FunnelChart: PublicComponent<FunnelChartProps>;
+export declare const Treemap: PublicComponent<TreemapProps>;
+export declare const SankeyChart: PublicComponent<SankeyChartProps>;
+export declare const Sparkline: PublicComponent<SparklineProps>;
+export declare const Heatmap: PublicComponent<HeatmapProps>;
+export declare const BarsList: PublicComponent<BarsListProps>;
+export type AreaChartStylesNames = 'area' | import('./types').BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type BarChartStylesNames = 'bar' | import('./types').BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type LineChartStylesNames = 'line' | import('./types').BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type CompositeChartStylesNames = 'line' | 'area' | 'bar' | import('./types').BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type PieChartStylesNames = 'root' | 'label';
+export type DonutChartStylesNames = PieChartStylesNames;
+export type ScatterChartStylesNames = import('./types').BaseChartStylesNames | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type BubbleChartStylesNames = ScatterChartStylesNames;
+export type RadarChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'curve' | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type RadialBarChartStylesNames = 'root' | 'container' | 'label' | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type FunnelChartStylesNames = 'root' | 'container' | 'label' | ChartLegendStylesNames | ChartTooltipStylesNames;
+export type TreemapStylesNames = 'root' | 'container';
+export type SankeyChartStylesNames = 'root' | 'container';
+export type SparklineStylesNames = 'root';
+export type HeatmapStylesNames = 'root' | 'rect' | 'weekdayLabel' | 'monthLabel' | 'legend' | 'legendLabel' | 'legendRect';
+export type BarsListStylesNames = 'root' | 'bar' | 'barLabel' | 'barValue' | 'labelsRow';
+export type ChartTooltipStylesNames = 'tooltip' | 'tooltipItem' | 'tooltipItemBody' | 'tooltipItemColor' | 'tooltipItemName' | 'tooltipItemData' | 'tooltipLabel' | 'tooltipBody';
+export type ChartLegendStylesNames = 'legendItem' | 'legendItemColor' | 'legendItemName' | 'legend';
+export type ChartCssVariables = Record<string, string>;
+export {};

package/lib/index.d.mts

@@ -0,0 +1,6 @@
+import './styles.css';
+export * from './types';
+export * from './charts';
+export * from './ChartTooltip';
+export * from './ChartLegend';
+export * from './utils';

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+import './styles.css';
+export * from './types';
+export * from './charts';
+export * from './ChartTooltip';
+export * from './ChartLegend';
+export * from './utils';

package/lib/internal/colors.d.ts

@@ -0,0 +1 @@
+export declare function resolveColor(color: unknown, fallback?: string): string;

package/lib/internal/component.d.ts

@@ -0,0 +1,4 @@
+import { type Component } from 'vue';
+import type { EChartsOption } from 'echarts';
+export type OptionBuilder = (props: Record<string, unknown>) => EChartsOption;
+export declare function createChartComponent(name: string, buildOption: OptionBuilder): Component;

package/lib/internal/echarts.d.ts

@@ -0,0 +1 @@
+export declare function registerECharts(): void;

package/lib/internal/options.d.ts

@@ -0,0 +1,11 @@
+import type { EChartsOption } from 'echarts';
+type Props = Record<string, unknown>;
+export declare function cartesianOption(props: Props, kind: 'line' | 'area' | 'bar' | 'composite'): EChartsOption;
+export declare function radialOption(props: Props, donut?: boolean): EChartsOption;
+export declare function scatterOption(props: Props, bubble?: boolean): EChartsOption;
+export declare function sparklineOption(props: Props): EChartsOption;
+export declare function radarOption(props: Props): EChartsOption;
+export declare function simpleOption(type: 'funnel' | 'treemap' | 'sankey', props: Props): EChartsOption;
+export declare function radialBarOption(props: Props): EChartsOption;
+export declare function heatmapOption(props: Props): EChartsOption;
+export {};

package/lib/types.d.ts

@@ -0,0 +1,79 @@
+import type { CSSProperties, HTMLAttributes, VNodeChild } from 'vue';
+import type { EChartsOption } from 'echarts';
+import type { MantineColor } from '@mantine-vue/core';
+export type ChartDataItem = Record<string, unknown>;
+export type ChartData = ChartDataItem[];
+export type ChartOptionProps = Record<string, unknown>;
+export interface ChartSeries {
+    name: string;
+    color?: MantineColor;
+    label?: string;
+    yAxisId?: string;
+}
+export interface ChartReferenceLineProps {
+    x?: string | number;
+    y?: string | number;
+    color?: MantineColor;
+    label?: string | Record<string, unknown>;
+    labelPosition?: string;
+    strokeDasharray?: string | number;
+    [key: string]: unknown;
+}
+export type BaseChartStylesNames = 'root' | 'container' | 'axis' | 'grid' | 'referenceLine' | 'axisLabel';
+export interface ChartRootProps {
+    class?: HTMLAttributes['class'];
+    className?: string;
+    style?: CSSProperties | string;
+    id?: string;
+    dir?: 'ltr' | 'rtl' | 'auto';
+    height?: string | number;
+    width?: string | number;
+    option?: EChartsOption;
+    loading?: boolean;
+    autoresize?: boolean;
+    /** ECharts renderer used to draw the chart. @default 'canvas' */
+    renderer?: 'canvas' | 'svg';
+    /** Additional options passed to `echarts.init`. */
+    initOptions?: Record<string, unknown>;
+}
+export interface GridChartBaseProps extends ChartRootProps {
+    data: ChartData;
+    dataKey: string;
+    referenceLines?: ChartReferenceLineProps[];
+    withXAxis?: boolean;
+    withYAxis?: boolean;
+    xAxisProps?: ChartOptionProps;
+    yAxisProps?: ChartOptionProps;
+    rightYAxisProps?: ChartOptionProps;
+    gridProps?: ChartOptionProps;
+    tickLine?: 'x' | 'y' | 'xy' | 'none';
+    strokeDasharray?: string | number;
+    gridAxis?: 'x' | 'y' | 'xy' | 'none';
+    unit?: string;
+    tooltipAnimationDuration?: number;
+    legendProps?: ChartOptionProps;
+    tooltipProps?: ChartOptionProps;
+    withLegend?: boolean;
+    withTooltip?: boolean;
+    textColor?: MantineColor;
+    gridColor?: MantineColor;
+    orientation?: 'horizontal' | 'vertical';
+    valueFormatter?: (value: number) => string;
+    xAxisLabel?: string;
+    yAxisLabel?: string;
+    rightYAxisLabel?: string;
+    withRightYAxis?: boolean;
+}
+export interface MantineChartDotProps extends ChartOptionProps {
+    strokeWidth?: number;
+}
+export interface ChartTooltipPayload {
+    name?: string;
+    dataKey?: string;
+    value?: unknown;
+    color?: string;
+    unit?: string;
+    payload?: ChartDataItem;
+    [key: string]: unknown;
+}
+export type ChartRenderable = VNodeChild | string | number | null | undefined;

package/lib/utils/get-series-labels/get-series-labels.d.ts

@@ -0,0 +1,2 @@
+import type { ChartSeries } from '../../types';
+export declare function getSeriesLabels(series: ChartSeries[] | undefined): Record<string, string>;

package/lib/utils/index.d.ts

@@ -0,0 +1 @@
+export { getSeriesLabels } from './get-series-labels/get-series-labels';

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@mantine-vue/charts",
+  "version": "1.1.1",
+  "description": "Charts components built with Apache ECharts and Mantine Vue",
+  "license": "MIT",
+  "files": [
+    "cjs",
+    "esm",
+    "lib",
+    "styles.css",
+    "styles.layer.css",
+    "styles"
+  ],
+  "sideEffects": [
+    "*.css"
+  ],
+  "main": "./cjs/index.cjs",
+  "module": "./esm/index.mjs",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./lib/index.d.mts",
+        "default": "./esm/index.mjs"
+      },
+      "require": {
+        "types": "./lib/index.d.ts",
+        "default": "./cjs/index.cjs"
+      }
+    },
+    "./styles.css": "./styles.css",
+    "./styles.layer.css": "./styles.layer.css"
+  },
+  "devDependencies": {
+    "@mantine-vue/core": "workspace:*",
+    "echarts": "^6.0.0",
+    "vue": "^3.5.0",
+    "vue-echarts": "^8.0.1"
+  },
+  "peerDependencies": {
+    "@mantine-vue/core": "1.1.1",
+    "echarts": ">=6.0.0",
+    "vue": "^3.5.0",
+    "vue-echarts": ">=8.0.0"
+  }
+}

package/styles.css

@@ -0,0 +1,12 @@
+.mantine-Chart-root { position: relative; color: var(--mantine-color-text); font-family: var(--mantine-font-family); }
+.mantine-Chart-container { width: 100%; height: 100%; }
+.mantine-ChartTooltip-tooltip { min-width: 150px; padding: 8px 12px; border: 1px solid var(--mantine-color-default-border); border-radius: var(--mantine-radius-default); background: var(--mantine-color-body); box-shadow: var(--mantine-shadow-md); color: var(--mantine-color-text); font-size: var(--mantine-font-size-sm); }
+.mantine-ChartTooltip-tooltipLabel { margin-bottom: 4px; font-weight: 500; }
+.mantine-ChartTooltip-tooltipBody { display: flex; flex-direction: column; gap: 4px; }
+.mantine-ChartTooltip-tooltipItem { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+.mantine-ChartTooltip-tooltipItemBody { display: flex; align-items: center; gap: 8px; }
+.mantine-ChartTooltip-tooltipItemColor, .mantine-ChartLegend-legendItemColor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
+.mantine-ChartTooltip-tooltipItemData { font-variant-numeric: tabular-nums; font-weight: 500; }
+.mantine-ChartLegend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--mantine-color-dimmed); font-size: var(--mantine-font-size-sm); }
+.mantine-ChartLegend-legend[data-centered] { justify-content: center; }
+.mantine-ChartLegend-legendItem { display: flex; align-items: center; gap: 6px; cursor: default; }

package/styles.layer.css

@@ -0,0 +1,14 @@
+@layer mantine {
+  .mantine-Chart-root { position: relative; color: var(--mantine-color-text); font-family: var(--mantine-font-family); }
+  .mantine-Chart-container { width: 100%; height: 100%; }
+  .mantine-ChartTooltip-tooltip { min-width: 150px; padding: 8px 12px; border: 1px solid var(--mantine-color-default-border); border-radius: var(--mantine-radius-default); background: var(--mantine-color-body); box-shadow: var(--mantine-shadow-md); color: var(--mantine-color-text); font-size: var(--mantine-font-size-sm); }
+  .mantine-ChartTooltip-tooltipLabel { margin-bottom: 4px; font-weight: 500; }
+  .mantine-ChartTooltip-tooltipBody { display: flex; flex-direction: column; gap: 4px; }
+  .mantine-ChartTooltip-tooltipItem { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
+  .mantine-ChartTooltip-tooltipItemBody { display: flex; align-items: center; gap: 8px; }
+  .mantine-ChartTooltip-tooltipItemColor, .mantine-ChartLegend-legendItemColor { display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: 0 0 auto; }
+  .mantine-ChartTooltip-tooltipItemData { font-variant-numeric: tabular-nums; font-weight: 500; }
+  .mantine-ChartLegend-legend { display: flex; flex-wrap: wrap; gap: 8px 16px; color: var(--mantine-color-dimmed); font-size: var(--mantine-font-size-sm); }
+  .mantine-ChartLegend-legend[data-centered] { justify-content: center; }
+  .mantine-ChartLegend-legendItem { display: flex; align-items: center; gap: 6px; cursor: default; }
+}