From 7c3e7a7ab68ee2f6a667a788221c100340fa51f0 Mon Sep 17 00:00:00 2001 From: plouc Date: Sat, 1 Jan 2022 17:23:20 +0900 Subject: [PATCH] feat(chord): rename properties related to active/inactive styles --- packages/chord/src/Chord.tsx | 16 ++++++------ packages/chord/src/ChordCanvas.tsx | 16 ++++++------ packages/chord/src/defaults.ts | 9 +++---- packages/chord/src/hooks.ts | 30 +++++++++++----------- packages/chord/src/types.ts | 9 +++---- website/src/data/components/chord/props.ts | 24 ++++++++--------- website/src/pages/chord/canvas.tsx | 8 +++--- website/src/pages/chord/index.tsx | 8 +++--- 8 files changed, 59 insertions(+), 61 deletions(-) diff --git a/packages/chord/src/Chord.tsx b/packages/chord/src/Chord.tsx index a0d38ac9f1..fa730b1363 100644 --- a/packages/chord/src/Chord.tsx +++ b/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({ diff --git a/packages/chord/src/ChordCanvas.tsx b/packages/chord/src/ChordCanvas.tsx index 6583128372..2a3ed44711 100644 --- a/packages/chord/src/ChordCanvas.tsx +++ b/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() diff --git a/packages/chord/src/defaults.ts b/packages/chord/src/defaults.ts index 271dfcc22b..94d0c4194a 100644 --- a/packages/chord/src/defaults.ts +++ b/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: [], diff --git a/packages/chord/src/hooks.ts b/packages/chord/src/hooks.ts index 47fc591251..1e8864c0ff 100644 --- a/packages/chord/src/hooks.ts +++ b/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(null) const [currentRibbon, setCurrentRibbon] = useState(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 { diff --git a/packages/chord/src/types.ts b/packages/chord/src/types.ts index eb04084c29..2a4d233768 100644 --- a/packages/chord/src/types.ts +++ b/packages/chord/src/types.ts @@ -118,8 +118,8 @@ export type ChordCommonProps = { colors: OrdinalColorScaleConfig> arcOpacity: number - arcHoverOpacity: number - arcHoverOthersOpacity: number + activeArcOpacity: number + inactiveArcOpacity: number arcBorderWidth: number arcBorderColor: InheritedColorConfig 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 @@ -141,7 +141,6 @@ export type ChordCommonProps = { labelTextColor: InheritedColorConfig isInteractive: boolean - defaultActiveNodeIds: string[] legends: LegendProps[] diff --git a/website/src/data/components/chord/props.ts b/website/src/data/components/chord/props.ts index 9b4b962846..f4e6ba1039 100644 --- a/website/src/data/components/chord/props.ts +++ b/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', diff --git a/website/src/pages/chord/canvas.tsx b/website/src/pages/chord/canvas.tsx index 0309b5bfc4..293e63d8bc 100644 --- a/website/src/pages/chord/canvas.tsx +++ b/website/src/pages/chord/canvas.tsx @@ -27,6 +27,8 @@ const initialProperties = { innerRadiusOffset: 0, arcOpacity: 1, + activeArcOpacity: 1, + inactiveArcOpacity: 0.4, arcBorderWidth: 0, arcBorderColor: { from: 'color', @@ -34,6 +36,8 @@ const initialProperties = { }, 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: [ { diff --git a/website/src/pages/chord/index.tsx b/website/src/pages/chord/index.tsx index 5dbe17cd3c..181692124f 100644 --- a/website/src/pages/chord/index.tsx +++ b/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',