129 lines
4.7 KiB
TypeScript
129 lines
4.7 KiB
TypeScript
import * as React from 'react';
|
|
import { ChartsColor } from "../colorPalettes/index.js";
|
|
import { ChartContainerProps } from "../ChartContainer/index.js";
|
|
import { ChartsTooltipSlots, ChartsTooltipSlotProps } from "../ChartsTooltip/ChartTooltip.types.js";
|
|
import { ChartsAxisHighlightProps } from "../ChartsAxisHighlight/index.js";
|
|
import { XAxis, YAxis } from "../models/axis.js";
|
|
import { LineSeriesType } from "../models/seriesType/index.js";
|
|
import { AreaPlotSlots, AreaPlotSlotProps } from "../LineChart/AreaPlot.js";
|
|
import { LinePlotSlots, LinePlotSlotProps } from "../LineChart/LinePlot.js";
|
|
import { MarkPlotSlots, MarkPlotSlotProps } from "../LineChart/MarkPlot.js";
|
|
import { LineHighlightPlotSlots, LineHighlightPlotSlotProps } from "../LineChart/LineHighlightPlot.js";
|
|
import { BarPlotSlots, BarPlotSlotProps } from "../BarChart/BarPlot.js";
|
|
import { ChartMargin } from "../internals/plugins/corePlugins/useChartDimensions/useChartDimensions.types.js";
|
|
export interface SparkLineChartSlots extends AreaPlotSlots, LinePlotSlots, MarkPlotSlots, LineHighlightPlotSlots, Omit<BarPlotSlots, 'barLabel'>, ChartsTooltipSlots {}
|
|
export interface SparkLineChartSlotProps extends AreaPlotSlotProps, LinePlotSlotProps, MarkPlotSlotProps, LineHighlightPlotSlotProps, BarPlotSlotProps, ChartsTooltipSlotProps {}
|
|
export interface SparkLineChartProps<PlotType extends 'line' | 'bar' = 'line' | 'bar'> extends Omit<ChartContainerProps, 'series' | 'xAxis' | 'yAxis' | 'zAxis' | 'radiusAxis' | 'rotationAxis' | 'margin' | 'plugins' | 'colors' | 'slots' | 'slotProps' | 'experimentalFeatures'> {
|
|
/**
|
|
* The xAxis configuration.
|
|
* Notice it is a single [[AxisConfig]] object, not an array of configuration.
|
|
*/
|
|
xAxis?: XAxis;
|
|
/**
|
|
* The yAxis configuration.
|
|
* Notice it is a single [[AxisConfig]] object, not an array of configuration.
|
|
*/
|
|
yAxis?: YAxis;
|
|
axisHighlight?: ChartsAxisHighlightProps;
|
|
/**
|
|
* Type of plot used.
|
|
* @default 'line'
|
|
*/
|
|
plotType?: PlotType;
|
|
/**
|
|
* Data to plot.
|
|
*/
|
|
data: number[];
|
|
/**
|
|
* Formatter used by the tooltip.
|
|
* @param {number} value The value to format.
|
|
* @returns {string} the formatted value.
|
|
* @default (value: number | null) => (value === null ? '' : value.toString())
|
|
*/
|
|
valueFormatter?: (value: number | null) => string;
|
|
/**
|
|
* Set to `true` to enable the tooltip in the sparkline.
|
|
* @default false
|
|
*/
|
|
showTooltip?: boolean;
|
|
/**
|
|
* Set to `true` to highlight the value.
|
|
* With line, it shows a point.
|
|
* With bar, it shows a highlight band.
|
|
* @default false
|
|
*/
|
|
showHighlight?: boolean;
|
|
/**
|
|
* Set to `true` to fill spark line area.
|
|
* Has no effect if plotType='bar'.
|
|
* @default false
|
|
*/
|
|
area?: PlotType extends 'line' ? LineSeriesType['area'] : never;
|
|
/**
|
|
* @default 'linear'
|
|
*/
|
|
curve?: PlotType extends 'line' ? LineSeriesType['curve'] : never;
|
|
/**
|
|
* The value of the line at the base of the series area.
|
|
*
|
|
* - `'min'` the area will fill the space **under** the line.
|
|
* - `'max'` the area will fill the space **above** the line.
|
|
* - `number` the area will fill the space between this value and the line
|
|
*
|
|
* @default 0
|
|
*/
|
|
baseline?: PlotType extends 'line' ? LineSeriesType['baseline'] : never;
|
|
/**
|
|
* The margin between the SVG and the drawing area.
|
|
* It's used for leaving some space for extra information such as the x- and y-axis or legend.
|
|
*
|
|
* Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
|
|
* @default 5
|
|
*/
|
|
margin?: Partial<ChartMargin> | number;
|
|
/**
|
|
* Overridable component slots.
|
|
* @default {}
|
|
*/
|
|
slots?: SparkLineChartSlots;
|
|
/**
|
|
* The props used for each component slot.
|
|
* @default {}
|
|
*/
|
|
slotProps?: SparkLineChartSlotProps;
|
|
/**
|
|
* Color used to colorize the sparkline.
|
|
* @default rainbowSurgePalette[0]
|
|
*/
|
|
color?: ChartsColor;
|
|
/**
|
|
* When `true`, the chart's drawing area will not be clipped and elements within can visually overflow the chart.
|
|
*
|
|
* @default false
|
|
*/
|
|
disableClipping?: boolean;
|
|
/**
|
|
* The clipped area offset in pixels.
|
|
*
|
|
* This prevents partial clipping of lines when they are drawn on the edge of the drawing area.
|
|
*
|
|
* @default { top: 1, right: 1, bottom: 1, left: 1 }
|
|
*/
|
|
clipAreaOffset?: {
|
|
top?: number;
|
|
right?: number;
|
|
bottom?: number;
|
|
left?: number;
|
|
};
|
|
}
|
|
/**
|
|
* Demos:
|
|
*
|
|
* - [SparkLine](https://mui.com/x/react-charts/sparkline/)
|
|
*
|
|
* API:
|
|
*
|
|
* - [SparkLineChart API](https://mui.com/x/api/charts/spark-line-chart/)
|
|
*/
|
|
declare const SparkLineChart: React.ForwardRefExoticComponent<SparkLineChartProps<"line" | "bar"> & React.RefAttributes<SVGSVGElement>>;
|
|
export { SparkLineChart }; |