diff --git a/src/core/config/index.js b/src/core/config/index.js index dd25d98..a864d99 100644 --- a/src/core/config/index.js +++ b/src/core/config/index.js @@ -33,6 +33,10 @@ export const DEFAULT_PROPS = { // custom segment labels customSegmentLabels: [], + + // show custom segment labels only on hover + showSegmentLabelsOnlyOnHover: false, + // color strings needleColor: 'steelblue', startColor: '#FF471A', @@ -117,6 +121,9 @@ export const getConfig = ({ PROPS, parentWidth, parentHeight }) => { // custom segment labels customSegmentLabels: PROPS.customSegmentLabels, + // show custom segment labels only on hover + showSegmentLabelsOnlyOnHover: PROPS.showSegmentLabelsOnlyOnHover, + // max segment labels maxSegmentLabels: calculateSegmentLabelCount({ maxSegmentLabelCount: PROPS.maxSegmentLabels, diff --git a/src/core/render/index.js b/src/core/render/index.js index 4947e51..66d2798 100644 --- a/src/core/render/index.js +++ b/src/core/render/index.js @@ -219,7 +219,26 @@ function _renderCustomSegmentLabels({ const position = outerRadius - (outerRadius - innerRadius) / 2 - let lg = svg.append('g').attr('class', 'label').attr('transform', centerTx) + let lg; + if (config.showSegmentLabelsOnlyOnHover) { + lg = svg.append('g') + .attr('class', 'label custom-segment-labels') + .attr('transform', centerTx) + .style('opacity', 0) // Start with labels hidden + + // Add hover events to the parent SVG + svg + .on('mouseenter', () => { + lg.style('opacity', 1) + .style('transition', 'opacity 0.2s ease-in-out') + }) + .on('mouseleave', () => { + lg.style('opacity', 0) + .style('transition', 'opacity 0.2s ease-in-out') + }) + } else { + lg = svg.append('g').attr('class', 'label').attr('transform', centerTx) + } lg.selectAll('text') .data(customSegmentLabels) diff --git a/src/index.d.ts b/src/index.d.ts index 7d3b6ec..c5bee71 100644 --- a/src/index.d.ts +++ b/src/index.d.ts @@ -82,6 +82,8 @@ declare module 'react-d3-speedometer' { customSegmentLabels?: CustomSegmentLabel[] + showSegmentLabelsOnlyOnHover?: boolean + labelFontSize?: string valueTextFontSize?: string valueTextFontWeight?: string