feat(chord): rename properties related to active/inactive styles

Author: plouc

packages/chord/src/Chord.tsx

@@ -31,16 +31,16 @@ const InnerChord = ({
     arcBorderWidth = svgDefaultProps.arcBorderWidth,
     arcBorderColor = svgDefaultProps.arcBorderColor,
     arcOpacity = svgDefaultProps.arcOpacity,
-    arcHoverOpacity = svgDefaultProps.arcHoverOpacity,
-    arcHoverOthersOpacity = svgDefaultProps.arcHoverOthersOpacity,
+    activeArcOpacity = svgDefaultProps.activeArcOpacity,
+    inactiveArcOpacity = svgDefaultProps.inactiveArcOpacity,
     arcTooltip = svgDefaultProps.arcTooltip,
 
     ribbonBorderWidth = svgDefaultProps.ribbonBorderWidth,
     ribbonBorderColor = svgDefaultProps.ribbonBorderColor,
     ribbonBlendMode = svgDefaultProps.ribbonBlendMode,
     ribbonOpacity = svgDefaultProps.ribbonOpacity,
-    ribbonHoverOpacity = svgDefaultProps.ribbonHoverOpacity,
-    ribbonHoverOthersOpacity = svgDefaultProps.ribbonHoverOthersOpacity,
+    activeRibbonOpacity = svgDefaultProps.activeRibbonOpacity,
+    inactiveRibbonOpacity = svgDefaultProps.inactiveRibbonOpacity,
     ribbonTooltip = svgDefaultProps.ribbonTooltip,
 
     enableLabel = svgDefaultProps.enableLabel,
@@ -87,12 +87,12 @@ const InnerChord = ({
     const { setCurrentArc, setCurrentRibbon, getArcOpacity, getRibbonOpacity } = useChordSelection({
         arcs,
         arcOpacity,
-        arcHoverOpacity,
-        arcHoverOthersOpacity,
+        activeArcOpacity,
+        inactiveArcOpacity,
         ribbons,
         ribbonOpacity,
-        ribbonHoverOpacity,
-        ribbonHoverOthersOpacity,
+        activeRibbonOpacity,
+        inactiveRibbonOpacity,
     })
 
     const customLayerProps = useCustomLayerProps({

packages/chord/src/ChordCanvas.tsx

@@ -62,14 +62,14 @@ const InnerChordCanvas = ({
     arcBorderWidth = canvasDefaultProps.arcBorderWidth,
     arcBorderColor = canvasDefaultProps.arcBorderColor,
     arcOpacity = canvasDefaultProps.arcOpacity,
-    arcHoverOpacity = canvasDefaultProps.arcHoverOpacity,
-    arcHoverOthersOpacity = canvasDefaultProps.arcHoverOthersOpacity,
+    activeArcOpacity = canvasDefaultProps.activeArcOpacity,
+    inactiveArcOpacity = canvasDefaultProps.inactiveArcOpacity,
     arcTooltip = canvasDefaultProps.arcTooltip,
     ribbonBorderWidth = canvasDefaultProps.ribbonBorderWidth,
     ribbonBorderColor = canvasDefaultProps.ribbonBorderColor,
     ribbonOpacity = canvasDefaultProps.ribbonOpacity,
-    ribbonHoverOpacity = canvasDefaultProps.ribbonHoverOpacity,
-    ribbonHoverOthersOpacity = canvasDefaultProps.arcHoverOthersOpacity,
+    activeRibbonOpacity = canvasDefaultProps.activeRibbonOpacity,
+    inactiveRibbonOpacity = canvasDefaultProps.inactiveRibbonOpacity,
     enableLabel = canvasDefaultProps.enableLabel,
     labelOffset = canvasDefaultProps.labelOffset,
     labelRotation = canvasDefaultProps.labelRotation,
@@ -105,12 +105,12 @@ const InnerChordCanvas = ({
     const { currentArc, setCurrentArc, getArcOpacity, getRibbonOpacity } = useChordSelection({
         arcs,
         arcOpacity,
-        arcHoverOpacity,
-        arcHoverOthersOpacity,
+        activeArcOpacity,
+        inactiveArcOpacity,
         ribbons,
         ribbonOpacity,
-        ribbonHoverOpacity,
-        ribbonHoverOthersOpacity,
+        activeRibbonOpacity,
+        inactiveRibbonOpacity,
     })
 
     const theme = useTheme()

packages/chord/src/defaults.ts

@@ -31,8 +31,8 @@ export const commonDefaultProps: Omit<
     colors: { scheme: 'nivo' },
 
     arcOpacity: 1,
-    arcHoverOpacity: 1,
-    arcHoverOthersOpacity: 0.15,
+    activeArcOpacity: 1,
+    inactiveArcOpacity: 0.15,
     arcBorderWidth: 1,
     arcBorderColor: {
         from: 'color',
@@ -41,8 +41,8 @@ export const commonDefaultProps: Omit<
     arcTooltip: ChordArcTooltip,
 
     ribbonOpacity: 0.5,
-    ribbonHoverOpacity: 0.85,
-    ribbonHoverOthersOpacity: 0.15,
+    activeRibbonOpacity: 0.85,
+    inactiveRibbonOpacity: 0.15,
     ribbonBorderWidth: 1,
     ribbonBorderColor: {
         from: 'color',
@@ -60,7 +60,6 @@ export const commonDefaultProps: Omit<
     },
 
     isInteractive: true,
-    defaultActiveNodeIds: [],
 
     legends: [],
 

packages/chord/src/hooks.ts

@@ -122,21 +122,21 @@ export const useChord = ({
 export const useChordSelection = ({
     arcs,
     arcOpacity = commonDefaultProps.arcOpacity,
-    arcHoverOpacity = commonDefaultProps.arcHoverOpacity,
-    arcHoverOthersOpacity = commonDefaultProps.arcHoverOthersOpacity,
+    activeArcOpacity = commonDefaultProps.activeArcOpacity,
+    inactiveArcOpacity = commonDefaultProps.inactiveArcOpacity,
     ribbons,
     ribbonOpacity = commonDefaultProps.ribbonOpacity,
-    ribbonHoverOpacity = commonDefaultProps.ribbonHoverOpacity,
-    ribbonHoverOthersOpacity = commonDefaultProps.ribbonHoverOthersOpacity,
+    activeRibbonOpacity = commonDefaultProps.activeRibbonOpacity,
+    inactiveRibbonOpacity = commonDefaultProps.inactiveRibbonOpacity,
 }: {
     arcs: ArcDatum[]
     arcOpacity?: ChordCommonProps['arcOpacity']
-    arcHoverOpacity?: ChordCommonProps['arcHoverOpacity']
-    arcHoverOthersOpacity?: ChordCommonProps['arcHoverOthersOpacity']
+    activeArcOpacity?: ChordCommonProps['activeArcOpacity']
+    inactiveArcOpacity?: ChordCommonProps['inactiveArcOpacity']
     ribbons: RibbonDatum[]
     ribbonOpacity?: ChordCommonProps['ribbonOpacity']
-    ribbonHoverOpacity?: ChordCommonProps['ribbonHoverOpacity']
-    ribbonHoverOthersOpacity?: ChordCommonProps['ribbonHoverOthersOpacity']
+    activeRibbonOpacity?: ChordCommonProps['activeRibbonOpacity']
+    inactiveRibbonOpacity?: ChordCommonProps['inactiveRibbonOpacity']
 }) => {
     const [currentArc, setCurrentArc] = useState<ArcDatum | null>(null)
     const [currentRibbon, setCurrentRibbon] = useState<RibbonDatum | null>(null)
@@ -172,20 +172,20 @@ export const useChordSelection = ({
     const getArcOpacity = useMemo(
         () => (arc: ArcDatum) => {
             if (!hasSelection) return arcOpacity
-            return selection.selectedArcIds.includes(arc.id)
-                ? arcHoverOpacity
-                : arcHoverOthersOpacity
+
+            return selection.selectedArcIds.includes(arc.id) ? activeArcOpacity : inactiveArcOpacity
         },
-        [selection.selectedArcIds, arcOpacity, arcHoverOpacity, arcHoverOthersOpacity]
+        [selection.selectedArcIds, arcOpacity, activeArcOpacity, inactiveArcOpacity]
     )
     const getRibbonOpacity = useMemo(
         () => (ribbon: RibbonDatum) => {
             if (!hasSelection) return ribbonOpacity
+
             return selection.selectedRibbonIds.includes(ribbon.id)
-                ? ribbonHoverOpacity
-                : ribbonHoverOthersOpacity
+                ? activeRibbonOpacity
+                : inactiveRibbonOpacity
         },
-        [selection.selectedRibbonIds, ribbonOpacity, ribbonHoverOpacity, ribbonHoverOthersOpacity]
+        [selection.selectedRibbonIds, ribbonOpacity, activeRibbonOpacity, inactiveRibbonOpacity]
     )
 
     return {

packages/chord/src/types.ts

@@ -118,8 +118,8 @@ export type ChordCommonProps = {
     colors: OrdinalColorScaleConfig<Omit<ArcDatum, 'label' | 'color'>>
 
     arcOpacity: number
-    arcHoverOpacity: number
-    arcHoverOthersOpacity: number
+    activeArcOpacity: number
+    inactiveArcOpacity: number
     arcBorderWidth: number
     arcBorderColor: InheritedColorConfig<ArcDatum>
     onArcMouseEnter: ChordArcMouseHandler
@@ -130,8 +130,8 @@ export type ChordCommonProps = {
 
     ribbonBlendMode: CssMixBlendMode
     ribbonOpacity: number
-    ribbonHoverOpacity: number
-    ribbonHoverOthersOpacity: number
+    activeRibbonOpacity: number
+    inactiveRibbonOpacity: number
     ribbonBorderWidth: number
     ribbonBorderColor: InheritedColorConfig<ArcDatum>
 
@@ -141,7 +141,6 @@ export type ChordCommonProps = {
     labelTextColor: InheritedColorConfig<ArcDatum>
 
     isInteractive: boolean
-    defaultActiveNodeIds: string[]
 
     legends: LegendProps[]
 

website/src/data/components/chord/props.ts

@@ -286,41 +286,41 @@ const props: ChartProperty[] = [
         defaultValue: defaults.isInteractive,
     }),
     {
-        key: 'arcHoverOpacity',
+        key: 'activeArcOpacity',
         flavors: ['svg', 'canvas'],
-        help: 'Arc opacity when hover (0~1).',
+        help: 'Arc opacity when active.',
         required: false,
-        defaultValue: defaults.arcHoverOpacity,
+        defaultValue: defaults.activeArcOpacity,
         type: 'number',
         control: { type: 'opacity' },
         group: 'Interactivity',
     },
     {
-        key: 'arcHoverOthersOpacity',
+        key: 'inactiveArcOpacity',
         flavors: ['svg', 'canvas'],
-        help: 'Arc opacity when not hover (0~1).',
+        help: 'Arc opacity when inactive.',
         required: false,
-        defaultValue: defaults.arcHoverOthersOpacity,
+        defaultValue: defaults.inactiveArcOpacity,
         type: 'number',
         control: { type: 'opacity' },
         group: 'Interactivity',
     },
     {
-        key: 'ribbonHoverOpacity',
+        key: 'activeRibbonOpacity',
         flavors: ['svg', 'canvas'],
-        help: 'Ribbon opacity when hover (0~1).',
+        help: 'Ribbon opacity when active.',
         required: false,
-        defaultValue: defaults.ribbonHoverOpacity,
+        defaultValue: defaults.activeRibbonOpacity,
         type: 'number',
         control: { type: 'opacity' },
         group: 'Interactivity',
     },
     {
-        key: 'ribbonHoverOthersOpacity',
+        key: 'inactiveRibbonOpacity',
         flavors: ['svg', 'canvas'],
-        help: 'Ribbon opacity when not hover (0~1).',
+        help: 'Ribbon opacity when inactive.',
         required: false,
-        defaultValue: defaults.ribbonHoverOthersOpacity,
+        defaultValue: defaults.inactiveRibbonOpacity,
         type: 'number',
         control: { type: 'opacity' },
         group: 'Interactivity',

website/src/pages/chord/canvas.tsx

@@ -27,13 +27,17 @@ const initialProperties = {
     innerRadiusOffset: 0,
 
     arcOpacity: 1,
+    activeArcOpacity: 1,
+    inactiveArcOpacity: 0.4,
     arcBorderWidth: 0,
     arcBorderColor: {
         from: 'color',
         modifiers: [['darker', 0.4]],
     },
 
     ribbonOpacity: 0.5,
+    activeRibbonOpacity: 0.75,
+    inactiveRibbonOpacity: 0,
     ribbonBorderWidth: 0,
     ribbonBorderColor: {
         from: 'color',
@@ -52,10 +56,6 @@ const initialProperties = {
     colors: { scheme: 'red_blue' },
 
     isInteractive: true,
-    arcHoverOpacity: 1,
-    arcHoverOthersOpacity: 0.4,
-    ribbonHoverOpacity: 0.75,
-    ribbonHoverOthersOpacity: 0,
 
     legends: [
         {

website/src/pages/chord/index.tsx

@@ -24,6 +24,8 @@ const initialProperties = {
     innerRadiusOffset: 0.02,
 
     arcOpacity: 1,
+    activeArcOpacity: 1,
+    inactiveArcOpacity: 0.25,
     arcBorderWidth: 1,
     arcBorderColor: {
         from: 'color',
@@ -32,6 +34,8 @@ const initialProperties = {
 
     ribbonBlendMode: 'normal',
     ribbonOpacity: 0.5,
+    activeRibbonOpacity: 0.75,
+    inactiveRibbonOpacity: 0.25,
     ribbonBorderWidth: 1,
     ribbonBorderColor: {
         from: 'color',
@@ -50,10 +54,6 @@ const initialProperties = {
     colors: { scheme: 'nivo' },
 
     isInteractive: true,
-    arcHoverOpacity: 1,
-    arcHoverOthersOpacity: 0.25,
-    ribbonHoverOpacity: 0.75,
-    ribbonHoverOthersOpacity: 0.25,
 
     animate: true,
     motionConfig: 'stiff',