Добавлена настройка штриховки

This commit is contained in:
Александр Сироткин 2022-07-30 22:45:08 +05:00
parent 367b63ae50
commit 1b6768be90
3 changed files with 11 additions and 1 deletions

View File

@ -79,6 +79,8 @@ export type D3ChartProps<DataType> = React.DetailedHTMLProps<React.HTMLAttribute
backgroundColor?: Property.Color
/** Настройки рисок и цен деления графика */
ticks?: ChartTicks<DataType>
/** Штриховка графика */
dash?: string | number | number[]
/** Параметры плагинов */
plugins?: {
/** Параметры контекстного меню */
@ -111,6 +113,7 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
backgroundColor = 'transparent',
ticks,
plugins,
dash,
...other
}: D3ChartProps<DataType>) => {
const xAxisConfig = usePartialProps<ChartAxis<DataType>>(_xAxisConfig, getDefaultXAxisConfig)
@ -334,6 +337,8 @@ const _D3Chart = <DataType extends Record<string, unknown>>({
if (chart.point)
renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
if (dash) chart().attr('stroke-dasharray', dash)
chart.afterDraw?.(chart)
})
}, [charts, data, xAxis, yAxis, height, offset])

View File

@ -111,6 +111,8 @@ export type D3MonitoringChartsProps<DataType extends Record<string, any>> = Reac
}
/** Настройки рисок и цен деления вертикальной шкалы */
yTicks?: ChartTick<DataType>
/** Штриховка графика */
dash?: string | number | number[]
/** Диапозон отображаемых значений по вертикальной оси (сверху вниз) */
yDomain?: MinMax
/** Событие, вызываемое при прокрутке колёсика мышки над графиком */
@ -162,6 +164,7 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
yTicks: _yTicks,
axisHeight = 20,
spaceBetweenGroups = 30,
dash,
className = '',
...other
@ -454,6 +457,8 @@ const _D3MonitoringCharts = <DataType extends Record<string, unknown>>({
if (chart.point)
renderPoint<DataType>(xAxis, yAxis, chart, chartData, true)
if (dash) chart().attr('stroke-dasharray', dash)
chart.afterDraw?.(chart)
})

View File

@ -70,7 +70,7 @@ const chartDatasets = [{
yAxis: {
type: 'linear',
accessor: (row) => row.operationValue?.targetValue ?? null,
}
},
}]
const xAxis = {