Plugins #

Squarified provide a serial of preset plugins.

• presetColor
• presetHighlight
• presetDrag
• presetContextMenu
• presetScale
• presetZoomable

How to customize plugin? #

squarified provide a function helper to declare a plugin.

import { definePlugin } from 'squarified'

export const plugin = definePlugin({
  name: 'plugin'
  //   ...hook
})

Plugin Lifecycle Hooks #

Preset Color #

Based on module id to generate rainbow colors.

import { createTreemap } from 'squarified'
import { presetColorPlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetColorPlugin]
})

Preset Highlight #

Module highlight plugin.

import { createTreemap } from 'squarified'
import { presetHighlightPlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetHighlightPlugin]
})

preset Drag #

Module dragable plugin.

import { createTreemap } from 'squarified'
import { presetDragElementPlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetDragElementPlugin]
})

preset Context Menu #

Context menu plugin.

import { createTreemap } from 'squarified'
import { presetMenuPlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetMenuPlugin]
})

preset Scale #

Module scale/wheel plugin.

import { createTreemap } from 'squarified'
import { presetScalePlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetScalePlugin]
})

preset Zoomable #

Module zoom plugin.

import { createTreemap } from 'squarified'
import { presetZoomablePlugin } from 'squarified/plugins'

const treemap = createTreemap({
  plugins: [presetZoomablePlugin]
})