react-jsx-highcharts
Version:
Highcharts charts built using React components
82 lines • 2.03 kB
JavaScript
import * as React from 'react';
import { useMemo } from 'react';
import HighchartsChart from '../HighchartsChart';
import Chart from '../Chart';
import XAxis from '../XAxis';
import YAxis from '../YAxis';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const defaultSparklinePlotOptions = {
series: {
animation: false,
lineWidth: 1,
shadow: false,
states: {
hover: {
lineWidth: 1
}
},
marker: {
radius: 1,
states: {
hover: {
radius: 2
}
}
},
fillOpacity: 0.25
}
};
const EMPTY_ARRAY = [];
const EMPTY_OBJECT = {};
const ZERO_ARRAY = [0];
const LABELS_DISABLED = {
enabled: false
};
const DEFAULT_MARGIN = [2, 0, 2, 0];
const HighchartsSparkline = ({
height = 20,
width = 120,
margin = DEFAULT_MARGIN,
style = EMPTY_OBJECT,
series,
children,
plotOptions = defaultSparklinePlotOptions,
...rest
}) => {
const chartStyle = useMemo(() => ({
overflow: 'visible',
...style
}), [style]);
const hasSeriesProp = !!series;
// If you want to use functionality like Tooltips, pass the data component on the `series` prop
const Series = hasSeriesProp ? series : children;
return /*#__PURE__*/_jsxs(HighchartsChart, {
plotOptions: plotOptions,
...rest,
children: [/*#__PURE__*/_jsx(Chart, {
height: height,
width: width,
animation: false,
backgroundColor: null,
borderWidth: 0,
margin: margin,
style: chartStyle,
skipClone: true
}), /*#__PURE__*/_jsx(XAxis, {
labels: LABELS_DISABLED,
startOnTick: false,
endOnTick: false,
tickPositions: EMPTY_ARRAY
}), /*#__PURE__*/_jsx(YAxis, {
id: "sparkline",
labels: LABELS_DISABLED,
startOnTick: false,
endOnTick: false,
tickPositions: ZERO_ARRAY,
children: Series
}), hasSeriesProp && /*#__PURE__*/_jsx(_Fragment, {
children: children
})]
});
};
export default HighchartsSparkline;