Looks

Quick start

import { chartLook } from '@tiptap-pro/extension-diagrams'

const [first, second] = editor.storage.diagrams.listCharts()

// Give the second chart the look of the first one
const look = chartLook(first.spec, first.data)
editor.commands.applyChartLook({ look, pos: second.pos })

// Insert a new line chart with the same look
editor.commands.insertChart({ type: 'line', data: second.data, look })

// A template also holds the chart type
const template = chartLook(first.spec, first.data, { type: true })
editor.commands.insertChart({ data: second.data, look: template })

listCharts() returns every chart in the document.

What a look holds

chartLook(spec, data, { references?, type? }) takes the look of a chart:

• style, palette, background, border and legend
• the grid and axis lines
• the label layout of the category axis
• the line styles of the series, by position: the first series' style goes to the first series
• the reference lines

Titles, ranges, the step and the data stay with each chart.

When you apply a look, the chart keeps every field the look does not set. A look with the type is a template: every chart it is applied to, or starts, becomes that type. A type passed to insertChart wins over the look's.

Saving looks

A look is plain JSON. Your app can save it, per user or per team, and pass it back later.

readChartLook(value) checks a saved look the same way a Chart Spec is checked, and drops anything that does not belong in a look. applyChartLook and insertChart call it themselves.

Applying a look copies its fields into the chart, so a document stays complete without your saved looks.

Looks and styles

A style is different from a look. A chart names a style by id (spec.style) instead of copying its fields. When you change a registered style, every chart that names it changes.

Commands

applyChartLook

Gives a chart a look, taken from another chart or saved earlier.

editor.commands.applyChartLook({ look, pos: second.pos })

Returns false when there is no chart at pos, or no chart is selected.