From 5a8dab749abc0414ade857ce9dfcaa76a4d208ed Mon Sep 17 00:00:00 2001 From: Irina Kuzmina Date: Thu, 28 Dec 2023 13:50:41 +0200 Subject: [PATCH] feat(D3 plugin): add halo to pie series (#371) * Share code for the marker in the lines and areas series * feat(D3 plugin): add halo to pie series * fix review comment 1 --- .../d3/renderer/hooks/useSeries/constants.ts | 7 +- .../renderer/hooks/useSeries/prepare-pie.ts | 15 ++- .../renderer/hooks/useSeries/prepareSeries.ts | 4 +- .../d3/renderer/hooks/useSeries/types.ts | 23 +++-- .../renderer/hooks/useShapes/area/index.tsx | 95 ++++--------------- .../renderer/hooks/useShapes/line/index.tsx | 87 ++++------------- .../d3/renderer/hooks/useShapes/marker.ts | 89 +++++++++++++++++ .../d3/renderer/hooks/useShapes/pie/index.tsx | 36 +++++++ .../hooks/useShapes/pie/prepare-data.ts | 12 ++- .../d3/renderer/hooks/useShapes/pie/types.ts | 5 + src/types/widget-data/halo.ts | 9 ++ src/types/widget-data/index.ts | 1 + src/types/widget-data/marker.ts | 9 -- src/types/widget-data/pie.ts | 1 - src/types/widget-data/series.ts | 12 ++- 15 files changed, 221 insertions(+), 184 deletions(-) create mode 100644 src/plugins/d3/renderer/hooks/useShapes/marker.ts create mode 100644 src/types/widget-data/halo.ts diff --git a/src/plugins/d3/renderer/hooks/useSeries/constants.ts b/src/plugins/d3/renderer/hooks/useSeries/constants.ts index 40377902..792f566f 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/constants.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/constants.ts @@ -1,5 +1,4 @@ -import type {BaseTextStyle} from '../../../../../types'; -import type {PointMarkerHalo} from '../../../../../types/widget-data/marker'; +import type {BaseTextStyle, Halo} from '../../../../../types'; export const DEFAULT_LEGEND_SYMBOL_SIZE = 8; @@ -13,8 +12,8 @@ export const DEFAULT_DATALABELS_STYLE: BaseTextStyle = { fontColor: 'var(--d3-data-labels)', }; -export const DEFAULT_HALO_OPTIONS: Required = { +export const DEFAULT_HALO_OPTIONS: Required = { enabled: true, opacity: 0.25, - radius: 10, + size: 10, }; diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepare-pie.ts b/src/plugins/d3/renderer/hooks/useSeries/prepare-pie.ts index d443613f..b112c22a 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/prepare-pie.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/prepare-pie.ts @@ -1,4 +1,4 @@ -import {PieSeries} from '../../../../../types'; +import {ChartKitWidgetSeriesOptions, PieSeries} from '../../../../../types'; import {PreparedLegend, PreparedPieSeries, PreparedSeries} from './types'; import {scaleOrdinal} from 'd3'; import {DEFAULT_PALETTE} from '../../constants'; @@ -9,14 +9,16 @@ import {prepareLegendSymbol} from './utils'; type PreparePieSeriesArgs = { series: PieSeries; + seriesOptions?: ChartKitWidgetSeriesOptions; legend: PreparedLegend; }; export function preparePieSeries(args: PreparePieSeriesArgs) { - const {series, legend} = args; + const {series, seriesOptions, legend} = args; const dataNames = series.data.map((d) => d.name); const colorScale = scaleOrdinal(dataNames, DEFAULT_PALETTE); const stackId = getRandomCKId(); + const seriesHoverState = get(seriesOptions, 'pie.states.hover'); const preparedSeries: PreparedSeries[] = series.data.map((dataItem) => { const result: PreparedPieSeries = { @@ -49,6 +51,15 @@ export function preparePieSeries(args: PreparePieSeriesArgs) { radius: series.radius || '100%', innerRadius: series.innerRadius || 0, stackId, + states: { + hover: { + halo: { + enabled: get(seriesHoverState, 'halo.enabled', true), + opacity: get(seriesHoverState, 'halo.opacity', 0.25), + size: get(seriesHoverState, 'halo.size', 10), + }, + }, + }, }; return result; diff --git a/src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts b/src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts index 0ff16b13..283e2ee3 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/prepareSeries.ts @@ -54,7 +54,9 @@ export function prepareSeries(args: { switch (type) { case 'pie': { return series.reduce((acc, singleSeries) => { - acc.push(...preparePieSeries({series: singleSeries as PieSeries, legend})); + acc.push( + ...preparePieSeries({series: singleSeries as PieSeries, seriesOptions, legend}), + ); return acc; }, []); } diff --git a/src/plugins/d3/renderer/hooks/useSeries/types.ts b/src/plugins/d3/renderer/hooks/useSeries/types.ts index b4249f51..845def58 100644 --- a/src/plugins/d3/renderer/hooks/useSeries/types.ts +++ b/src/plugins/d3/renderer/hooks/useSeries/types.ts @@ -59,6 +59,12 @@ export type LegendConfig = { }; }; +export type PreparedHaloOptions = { + enabled: boolean; + opacity: number; + size: number; +}; + type BasePreparedSeries = { color: string; name: string; @@ -123,6 +129,11 @@ export type PreparedPieSeries = { distance: number; connectorCurve: ConnectorCurve; }; + states: { + hover: { + halo: PreparedHaloOptions; + }; + }; } & BasePreparedSeries; export type PreparedLineSeries = { @@ -149,11 +160,7 @@ export type PreparedLineSeries = { radius: number; borderWidth: number; borderColor: string; - halo: { - enabled: boolean; - opacity: number; - radius: number; - }; + halo: PreparedHaloOptions; }; }; }; @@ -188,11 +195,7 @@ export type PreparedAreaSeries = { radius: number; borderWidth: number; borderColor: string; - halo: { - enabled: boolean; - opacity: number; - radius: number; - }; + halo: PreparedHaloOptions; }; }; }; diff --git a/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx index 4182dc32..c52b745e 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx +++ b/src/plugins/d3/renderer/hooks/useShapes/area/index.tsx @@ -1,14 +1,6 @@ import React from 'react'; -import type {Dispatch, Selection, BaseType} from 'd3'; -import { - color, - line as lineGenerator, - area as areaGenerator, - select, - symbol, - symbolCircle, - symbolSquare, -} from 'd3'; +import type {Dispatch, BaseType} from 'd3'; +import {color, line as lineGenerator, area as areaGenerator, select} from 'd3'; import get from 'lodash/get'; import {block} from '../../../../../../utils/cn'; @@ -18,6 +10,14 @@ import type {TooltipDataChunkArea} from '../../../../../../types'; import type {LabelData} from '../../../types'; import {filterOverlappingLabels} from '../../../utils'; import {setActiveState} from '../utils'; +import { + getMarkerHaloVisibility, + getMarkerVisibility, + renderMarker, + selectMarkerHalo, + selectMarkerSymbol, + setMarker, +} from '../marker'; const b = block('d3-area'); @@ -27,47 +27,6 @@ type Args = { seriesOptions: PreparedSeriesOptions; }; -function setMarker( - selection: Selection, - state: 'normal' | 'hover', -) { - selection - .attr('d', (d) => { - const radius = - d.point.series.marker.states[state].radius + - d.point.series.marker.states[state].borderWidth; - return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius); - }) - .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth) - .attr('stroke', (d) => d.point.series.marker.states[state].borderColor); -} - -function getMarkerSymbol(type: string, radius: number) { - switch (type) { - case 'square': { - const size = Math.pow(radius, 2) * Math.PI; - return symbol(symbolSquare, size)(); - } - case 'circle': - default: { - const size = Math.pow(radius, 2) * Math.PI; - return symbol(symbolCircle, size)(); - } - } -} - -const getMarkerVisibility = (d: MarkerData) => { - const markerStates = d.point.series.marker.states; - const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled; - return enabled ? '' : 'hidden'; -}; - -const getMarkerHaloVisibility = (d: MarkerData) => { - const markerStates = d.point.series.marker.states; - const enabled = markerStates.hover.halo.enabled && d.hovered; - return enabled ? '' : 'hidden'; -}; - export const AreaSeriesShapes = (args: Args) => { const {dispatcher, preparedData, seriesOptions} = args; @@ -141,28 +100,7 @@ export const AreaSeriesShapes = (args: Args) => { .selectAll('marker') .data(markers) .join('g') - .attr('class', b('marker')) - .attr('visibility', getMarkerVisibility) - .attr('transform', (d) => { - return `translate(${d.point.x},${d.point.y})`; - }); - markerSelection - .append('path') - .attr('class', b('marker-halo')) - .attr('d', (d) => { - const type = d.point.series.marker.states.normal.symbol; - const radius = d.point.series.marker.states.hover.halo.radius; - return getMarkerSymbol(type, radius); - }) - .attr('fill', (d) => d.point.series.color) - .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity) - .attr('z-index', -1) - .attr('visibility', getMarkerHaloVisibility); - markerSelection - .append('path') - .attr('class', b('marker-symbol')) - .call(setMarker, 'normal') - .attr('fill', (d) => d.point.series.color); + .call(renderMarker); const hoverEnabled = hoverOptions?.enabled; const inactiveEnabled = inactiveOptions?.enabled; @@ -218,12 +156,11 @@ export const AreaSeriesShapes = (args: Args) => { if (d.hovered !== hovered) { d.hovered = hovered; elementSelection.attr('visibility', getMarkerVisibility(d)); - elementSelection - .select(`.${b('marker-halo')}`) - .attr('visibility', getMarkerHaloVisibility); - elementSelection - .select(`.${b('marker-symbol')}`) - .call(setMarker, hovered ? 'hover' : 'normal'); + selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility); + selectMarkerSymbol(elementSelection).call( + setMarker, + hovered ? 'hover' : 'normal', + ); } if (d.point.series.marker.states.normal.enabled) { diff --git a/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx index 2d01124c..5ea81930 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx +++ b/src/plugins/d3/renderer/hooks/useShapes/line/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import type {Dispatch, Selection, BaseType} from 'd3'; -import {color, line as lineGenerator, select, symbol, symbolCircle, symbolSquare} from 'd3'; +import type {Dispatch, BaseType} from 'd3'; +import {color, line as lineGenerator, select} from 'd3'; import get from 'lodash/get'; import {block} from '../../../../../../utils/cn'; @@ -10,6 +10,14 @@ import type {TooltipDataChunkLine} from '../../../../../../types'; import type {LabelData} from '../../../types'; import {filterOverlappingLabels} from '../../../utils'; import {getLineDashArray, setActiveState} from '../utils'; +import { + getMarkerHaloVisibility, + getMarkerVisibility, + renderMarker, + selectMarkerHalo, + selectMarkerSymbol, + setMarker, +} from '../marker'; const b = block('d3-line'); @@ -19,47 +27,6 @@ type Args = { seriesOptions: PreparedSeriesOptions; }; -function setMarker( - selection: Selection, - state: 'normal' | 'hover', -) { - selection - .attr('d', (d) => { - const radius = - d.point.series.marker.states[state].radius + - d.point.series.marker.states[state].borderWidth; - return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius); - }) - .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth) - .attr('stroke', (d) => d.point.series.marker.states[state].borderColor); -} - -function getMarkerSymbol(type: string, radius: number) { - switch (type) { - case 'square': { - const size = Math.pow(radius, 2) * Math.PI; - return symbol(symbolSquare, size)(); - } - case 'circle': - default: { - const size = Math.pow(radius, 2) * Math.PI; - return symbol(symbolCircle, size)(); - } - } -} - -const getMarkerVisibility = (d: MarkerData) => { - const markerStates = d.point.series.marker.states; - const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled; - return enabled ? '' : 'hidden'; -}; - -const getMarkerHaloVisibility = (d: MarkerData) => { - const markerStates = d.point.series.marker.states; - const enabled = markerStates.hover.halo.enabled && d.hovered; - return enabled ? '' : 'hidden'; -}; - export const LineSeriesShapes = (args: Args) => { const {dispatcher, preparedData, seriesOptions} = args; @@ -118,28 +85,7 @@ export const LineSeriesShapes = (args: Args) => { .selectAll('marker') .data(markers) .join('g') - .attr('class', b('marker')) - .attr('visibility', getMarkerVisibility) - .attr('transform', (d) => { - return `translate(${d.point.x},${d.point.y})`; - }); - markerSelection - .append('path') - .attr('class', b('marker-halo')) - .attr('d', (d) => { - const type = d.point.series.marker.states.normal.symbol; - const radius = d.point.series.marker.states.hover.halo.radius; - return getMarkerSymbol(type, radius); - }) - .attr('fill', (d) => d.point.series.color) - .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity) - .attr('z-index', -1) - .attr('visibility', getMarkerHaloVisibility); - markerSelection - .append('path') - .attr('class', b('marker-symbol')) - .call(setMarker, 'normal') - .attr('fill', (d) => d.point.series.color); + .call(renderMarker); const hoverEnabled = hoverOptions?.enabled; const inactiveEnabled = inactiveOptions?.enabled; @@ -196,12 +142,11 @@ export const LineSeriesShapes = (args: Args) => { if (d.hovered !== hovered) { d.hovered = hovered; elementSelection.attr('visibility', getMarkerVisibility(d)); - elementSelection - .select(`.${b('marker-halo')}`) - .attr('visibility', getMarkerHaloVisibility); - elementSelection - .select(`.${b('marker-symbol')}`) - .call(setMarker, hovered ? 'hover' : 'normal'); + selectMarkerHalo(elementSelection).attr('visibility', getMarkerHaloVisibility); + selectMarkerSymbol(elementSelection).call( + setMarker, + hovered ? 'hover' : 'normal', + ); } if (d.point.series.marker.states.normal.enabled) { diff --git a/src/plugins/d3/renderer/hooks/useShapes/marker.ts b/src/plugins/d3/renderer/hooks/useShapes/marker.ts new file mode 100644 index 00000000..15c6ae8f --- /dev/null +++ b/src/plugins/d3/renderer/hooks/useShapes/marker.ts @@ -0,0 +1,89 @@ +import {BaseType, Selection, symbol, symbolCircle, symbolSquare} from 'd3'; +import {MarkerData as LineMarkerData} from './line/types'; +import {MarkerData as AreaMarkerData} from './area/types'; +import {block} from '../../../../../utils/cn'; + +const b = block('d3-marker'); +const haloClassName = b('halo'); +const symbolClassName = b('symbol'); + +type MarkerData = LineMarkerData | AreaMarkerData; + +export function renderMarker( + selection: Selection, +) { + const markerSelection = selection + .attr('class', b('wrapper')) + .attr('visibility', getMarkerVisibility) + .attr('transform', (d) => { + return `translate(${d.point.x},${d.point.y})`; + }); + markerSelection + .append('path') + .attr('class', haloClassName) + .attr('d', (d) => { + const type = d.point.series.marker.states.normal.symbol; + const radius = d.point.series.marker.states.hover.halo.size; + return getMarkerSymbol(type, radius); + }) + .attr('fill', (d) => d.point.series.color) + .attr('opacity', (d) => d.point.series.marker.states.hover.halo.opacity) + .attr('z-index', -1) + .attr('visibility', getMarkerHaloVisibility); + markerSelection + .append('path') + .attr('class', symbolClassName) + .call(setMarker, 'normal') + .attr('fill', (d) => d.point.series.color); + + return markerSelection; +} + +export function getMarkerVisibility(d: MarkerData) { + const markerStates = d.point.series.marker.states; + const enabled = (markerStates.hover.enabled && d.hovered) || markerStates.normal.enabled; + return enabled ? '' : 'hidden'; +} + +export function getMarkerHaloVisibility(d: MarkerData) { + const markerStates = d.point.series.marker.states; + const enabled = markerStates.hover.halo.enabled && d.hovered; + return enabled ? '' : 'hidden'; +} + +export function setMarker( + selection: Selection, + state: 'normal' | 'hover', +) { + selection + .attr('d', (d) => { + const radius = + d.point.series.marker.states[state].radius + + d.point.series.marker.states[state].borderWidth; + return getMarkerSymbol(d.point.series.marker.states.normal.symbol, radius); + }) + .attr('stroke-width', (d) => d.point.series.marker.states[state].borderWidth) + .attr('stroke', (d) => d.point.series.marker.states[state].borderColor); +} + +export function getMarkerSymbol(type: string, radius: number) { + switch (type) { + case 'square': { + const size = Math.pow(radius, 2) * Math.PI; + return symbol(symbolSquare, size)(); + } + case 'circle': + default: { + const size = Math.pow(radius, 2) * Math.PI; + return symbol(symbolCircle, size)(); + } + } +} + +export function selectMarkerHalo(parentSelection: Selection) { + return parentSelection.select(`.${haloClassName}`); +} + +export function selectMarkerSymbol(parentSelection: Selection) { + return parentSelection.select(`.${symbolClassName}`); +} diff --git a/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx b/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx index 518da8d6..7644b3b7 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx +++ b/src/plugins/d3/renderer/hooks/useShapes/pie/index.tsx @@ -23,6 +23,11 @@ type PreparePieSeriesArgs = { svgContainer: SVGSVGElement | null; }; +export function getHaloVisibility(d: PieArcDatum) { + const enabled = d.data.pie.halo.enabled && d.data.hovered; + return enabled ? '' : 'hidden'; +} + export function PieSeriesShapes(args: PreparePieSeriesArgs) { const {dispatcher, preparedData, seriesOptions, svgContainer} = args; const ref = React.useRef(null); @@ -50,6 +55,28 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) { .style('stroke', (pieData) => pieData.borderColor) .style('stroke-width', (pieData) => pieData.borderWidth); + shapesSelection + .selectAll('halo') + .data((pieData) => { + if (pieData.halo.enabled) { + return pieData.segments; + } + return []; + }) + .join('path') + .attr('d', (d) => { + const arcGenerator = arc>() + .innerRadius(d.data.pie.innerRadius) + .outerRadius(d.data.pie.radius + d.data.pie.halo.size) + .cornerRadius(d.data.pie.borderRadius); + return arcGenerator(d); + }) + .attr('class', b('halo')) + .attr('fill', (d) => d.data.color) + .attr('opacity', (d) => d.data.pie.halo.opacity) + .attr('z-index', -1) + .attr('visibility', getHaloVisibility); + shapesSelection .selectAll(segmentSelector) .data((pieData) => pieData.segments) @@ -143,6 +170,9 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) { shapesSelection.datum((_d, index, list) => { const pieSelection = select(list[index]); + const haloSelection = pieSelection.selectAll>( + `.${b('halo')}`, + ); pieSelection .selectAll>(segmentSelector) @@ -163,6 +193,12 @@ export function PieSeriesShapes(args: PreparePieSeriesArgs) { } return initialColor; }); + + const currentSegmentHalo = haloSelection.nodes()[i]; + select>(currentSegmentHalo).attr( + 'visibility', + getHaloVisibility, + ); } setActiveState({ diff --git a/src/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.ts b/src/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.ts index 060c01f7..38b9ef82 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.ts +++ b/src/plugins/d3/renderer/hooks/useShapes/pie/prepare-data.ts @@ -38,11 +38,12 @@ const getCenter = ( }; export function preparePieData(args: Args): PreparedPieData[] { - const {series: prepapredSeries, boundsWidth, boundsHeight} = args; + const {series: preparedSeries, boundsWidth, boundsHeight} = args; const maxRadius = Math.min(boundsWidth, boundsHeight) / 2; - const groupedPieSeries = group(prepapredSeries, (pieSeries) => pieSeries.stackId); + const groupedPieSeries = group(preparedSeries, (pieSeries) => pieSeries.stackId); return Array.from(groupedPieSeries).map(([stackId, items]) => { + const series = items[0]; const { center, borderWidth, @@ -51,7 +52,7 @@ export function preparePieData(args: Args): PreparedPieData[] { radius: seriesRadius, innerRadius: seriesInnerRadius, dataLabels, - } = items[0]; + } = series; const radius = calculateNumericProperty({value: seriesRadius, base: maxRadius}) ?? maxRadius; @@ -67,6 +68,11 @@ export function preparePieData(args: Args): PreparedPieData[] { borderRadius, series: items[0], connectorCurve: dataLabels.connectorCurve, + halo: { + enabled: series.states.hover.halo.enabled, + opacity: series.states.hover.halo.opacity, + size: series.states.hover.halo.size, + }, }; const segments = items.map((item) => { diff --git a/src/plugins/d3/renderer/hooks/useShapes/pie/types.ts b/src/plugins/d3/renderer/hooks/useShapes/pie/types.ts index ef6e01f0..cdd7d589 100644 --- a/src/plugins/d3/renderer/hooks/useShapes/pie/types.ts +++ b/src/plugins/d3/renderer/hooks/useShapes/pie/types.ts @@ -35,4 +35,9 @@ export type PreparedPieData = { borderColor: string; series: PreparedPieSeries; connectorCurve: ConnectorCurve; + halo: { + enabled: boolean; + opacity: number; + size: number; + }; }; diff --git a/src/types/widget-data/halo.ts b/src/types/widget-data/halo.ts new file mode 100644 index 00000000..1101495c --- /dev/null +++ b/src/types/widget-data/halo.ts @@ -0,0 +1,9 @@ +/** The halo appearing around the hovered part of series(point in line-type series or slice in pie charts) */ +export type Halo = { + /** Enable or disable the halo */ + enabled?: boolean; + /** The opacity of halo */ + opacity?: number; + /** The pixel size of the halo. Radius for point markers or width of the outside slice in pie charts. */ + size?: number; +}; diff --git a/src/types/widget-data/index.ts b/src/types/widget-data/index.ts index 22d35314..f4021510 100644 --- a/src/types/widget-data/index.ts +++ b/src/types/widget-data/index.ts @@ -18,6 +18,7 @@ export * from './line'; export * from './series'; export * from './title'; export * from './tooltip'; +export * from './halo'; export type ChartKitWidgetData = { chart?: ChartKitWidgetChart; diff --git a/src/types/widget-data/marker.ts b/src/types/widget-data/marker.ts index efd72757..c0535db3 100644 --- a/src/types/widget-data/marker.ts +++ b/src/types/widget-data/marker.ts @@ -8,12 +8,3 @@ export type PointMarkerOptions = { /** The width of the point marker's border */ borderWidth?: number; }; - -export type PointMarkerHalo = { - /** Enable or disable the halo appearing around the point */ - enabled?: boolean; - /** The Opacity of the point halo */ - opacity?: number; - /** The radius of the point halo */ - radius?: number; -}; diff --git a/src/types/widget-data/pie.ts b/src/types/widget-data/pie.ts index d5a58aae..d9a0b556 100644 --- a/src/types/widget-data/pie.ts +++ b/src/types/widget-data/pie.ts @@ -46,7 +46,6 @@ export type PieSeries = BaseSeries & { legend?: ChartKitWidgetLegend & { symbol?: RectLegendSymbolOptions; }; - dataLabels?: BaseSeries['dataLabels'] & { /** * The distance of the data label from the pie's edge. diff --git a/src/types/widget-data/series.ts b/src/types/widget-data/series.ts index 7fddefd0..a8e99ede 100644 --- a/src/types/widget-data/series.ts +++ b/src/types/widget-data/series.ts @@ -4,8 +4,9 @@ import type {ScatterSeries, ScatterSeriesData} from './scatter'; import type {BarXSeries, BarXSeriesData} from './bar-x'; import type {LineSeries, LineSeriesData, LineMarkerOptions} from './line'; import type {BarYSeries, BarYSeriesData} from './bar-y'; -import type {PointMarkerOptions, PointMarkerHalo} from './marker'; +import type {PointMarkerOptions} from './marker'; import type {AreaSeries, AreaSeriesData} from './area'; +import type {Halo} from './halo'; import {DashStyle, LineCap} from '../../constants'; @@ -146,7 +147,10 @@ export type ChartKitWidgetSeriesOptions = { pie?: { /** Options for the series states that provide additional styling information to the series. */ states?: { - hover?: BasicHoverState; + hover?: BasicHoverState & { + /** Options for the halo appearing outside the hovered slice */ + halo?: Halo; + }; inactive?: BasicInactiveState; }; }; @@ -168,7 +172,7 @@ export type ChartKitWidgetSeriesOptions = { hover?: BasicHoverState & { marker?: PointMarkerOptions & { /** Options for the halo appearing around the hovered point */ - halo?: PointMarkerHalo; + halo?: Halo; }; }; inactive?: BasicInactiveState; @@ -199,7 +203,7 @@ export type ChartKitWidgetSeriesOptions = { hover?: BasicHoverState & { marker?: PointMarkerOptions & { /** Options for the halo appearing around the hovered point */ - halo?: PointMarkerHalo; + halo?: Halo; }; }; inactive?: BasicInactiveState;