Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat(website): add the ability to control charts annotations
  • Loading branch information
plouc committed Dec 31, 2021
1 parent 5575928 commit 720716b
Show file tree
Hide file tree
Showing 7 changed files with 157 additions and 14 deletions.
2 changes: 0 additions & 2 deletions packages/network/src/Network.tsx
Expand Up @@ -104,8 +104,6 @@ const InnerNetwork = <Node extends InputNode>({
annotations: null,
}

console.log(nodes)

if (layers.includes('links') && links !== null) {
layerById.links = (
<NetworkLinks<Node>
Expand Down
5 changes: 3 additions & 2 deletions website/src/components/controls/ObjectControl.tsx
Expand Up @@ -28,9 +28,10 @@ export const ObjectControl = memo(
value,
onChange,
context,
isOpenedByDefault = false,
}: ObjectControlProps) => {
const [isOpened, setIsOpened] = useState(isOpenedByDefault)
const [isOpened, setIsOpened] = useState(
config.isOpenedByDefault !== undefined ? config.isOpenedByDefault : false
)
const toggle = useCallback(() => setIsOpened(flag => !flag), [setIsOpened])

const subProps = useMemo(
Expand Down
1 change: 1 addition & 0 deletions website/src/components/controls/types.ts
Expand Up @@ -110,6 +110,7 @@ export interface AngleControlConfig {
export interface ObjectControlConfig {
type: 'object'
props: Omit<ChartProperty, 'group'>[]
isOpenedByDefault?: boolean
}

export interface ArrayControlConfig {
Expand Down
14 changes: 14 additions & 0 deletions website/src/data/components/network/props.ts
Expand Up @@ -5,6 +5,7 @@ import {
isInteractive,
commonAccessibilityProps,
blendMode,
annotations,
} from '../../../lib/chart-properties'
import { ChartProperty, Flavor } from '../../../types'
import { dynamicNodeSizeValue, dynamicLinkThicknessValue } from './mapper'
Expand Down Expand Up @@ -235,6 +236,19 @@ const props: ChartProperty[] = [
flavors: ['svg'],
defaultValue: defaults.linkBlendMode,
}),
annotations({
target: 'nodes',
flavors: allFlavors,
newDefaults: {
type: 'circle',
match: { id: '0' },
note: 'New annotation',
noteX: 160,
noteY: 36,
offset: 6,
noteTextOffset: 5,
},
}),
isInteractive({ flavors: allFlavors, defaultValue: defaults.isInteractive }),
{
key: 'nodeTooltip',
Expand Down
136 changes: 136 additions & 0 deletions website/src/lib/chart-properties/annotations.ts
@@ -0,0 +1,136 @@
import { ChartProperty, Flavor } from '../../types'

export const annotations = ({
key = 'annotations',
target,
group = 'Annotations',
type = 'AnnotationMatcher[]',
flavors,
defaultValue = [],
newDefaults,
}: {
key?: string
target: string
group?: string
type?: string
flavors: Flavor[]
defaultValue: any[]
newDefaults: any
}): ChartProperty => {
return {
key,
group,
help: `Annotations for ${target}.`,
type,
required: false,
flavors,
defaultValue,
control: {
type: 'array',
shouldCreate: true,
addLabel: 'add annotation',
shouldRemove: true,
getItemTitle: (index: number, annotation: any) =>
`annotation[${index}] '${annotation.note}' (${annotation.type})`,
defaults: newDefaults,
props: [
{
key: 'type',
flavors,
help: `Annotation type.`,
type: `'dot' | 'circle' | 'rect'`,
required: true,
control: {
type: 'choices',
choices: [
{ value: 'dot', label: 'dot' },
{ value: 'circle', label: 'circle' },
{ value: 'rect', label: 'rect' },
],
},
},
{
key: 'match',
flavors,
help: 'Annotation matcher.',
required: true,
type: 'object',
control: {
type: 'object',
isOpenedByDefault: true,
props: [
{
key: 'id',
required: false,
flavors,
help: 'Match elements having the provided ID.',
type: 'string | number',
control: {
type: 'text',
},
},
],
},
},
{
key: 'note',
flavors,
help: `Annotation note.`,
type: 'text',
required: true,
control: { type: 'text' },
},
{
key: 'noteX',
flavors,
help: `Annotation note x position.`,
type: 'number',
required: true,
control: {
type: 'range',
min: -300,
max: 300,
step: 5,
},
},
{
key: 'noteY',
flavors,
help: `Annotation note y position.`,
type: 'number',
required: true,
control: {
type: 'range',
min: -300,
max: 300,
step: 5,
},
},
{
key: 'noteTextOffset',
flavors,
help: `Annotation note text offset.`,
type: 'number',
required: true,
control: {
type: 'range',
min: -64,
max: 64,
},
},
{
key: 'offset',
flavors,
help: `Offset from annotated element.`,
type: 'number',
required: false,
control: {
type: 'range',
min: 0,
max: 32,
},
},
],
},
}
}
1 change: 1 addition & 0 deletions website/src/lib/chart-properties/index.ts
@@ -1,4 +1,5 @@
export * from './accessibility'
export * from './annotations'
export * from './axes'
export * from './chart-dimensions'
export * from './colors'
Expand Down
12 changes: 2 additions & 10 deletions website/src/pages/network/index.tsx
Expand Up @@ -35,6 +35,8 @@ const initialProperties = Object.freeze({
linkColor: defaults.linkColor,
linkBlendMode: 'multiply',

annotations: defaults.annotations,

isInteractive: true,

animate: true,
Expand Down Expand Up @@ -95,16 +97,6 @@ const Network = () => {
}
{...properties}
theme={theme}
annotations={[
{
type: 'circle',
match: { id: '10' },
noteX: 40,
noteY: 40,
offset: 4,
note: 'Node id: 10',
},
]}
onClick={node => {
logAction({
type: 'click',
Expand Down

0 comments on commit 720716b

Please sign in to comment.