Vue-component including graph settings interface and resulting rendered graph.
For using graph only (creating picture without user interface) use miplots4.

How to connect

Basic usage in a page of block's ui (discrete boxplot graph in example):

``



`
Necessary properties are: chartType, graph's state (v-model) and pFrame.

chartType must be one of: 'discrete', 'scatterplot', 'scatterplot-umap', 'heatmap', 'bubble', 'histogram', 'dendro'. Chart type defines graph structure and available settings set. Once set chart type can't be changed.

State (v-model) must satisfy GraphMakerState. Necessary fields – title (goes to big editable title above the chart) and template ('box', 'violin' for discrete, 'dots', 'curve' for scatterplot' etc.)
Other fields of state Graph-maker uses to save/load changes in interface.
Any of them can be predefined, fully ot partially.

pFrame must be created in a model part of a block as an output. Use createPFrameForGraphs or ctx.createPFrame(columns).

Other abilities

Slots

\#titleLine - slot in horizontal line with main title

\#settingsSlot - if used creates additional 'Settings' tab with its content in right panel

\#logSlot - if used creates additional 'Log' tab with its content in right panel

Available properties

$3

Defines default state of data-mapping tab. User changes have higher priority, default state applies only if nothing from user changes conflicts with them. To set use column/axis specs(description, types) from pFrame and names of inputs ('x', 'y', 'primaryGrouping', 'filters' etc):

`
const defaultOptions:PredefinedGraphOption<'discrete'> = [{
inputName: 'y'
selectedSource: {
kind: 'PColumn',
name: 'FractionOfReads',
valueType: 'Double',
domain: {...},
axesSpec: [...]
}, // AxisSpec | PColumnSpec from '@sdk/model'
}, {
inputName: 'filters'
selectedSource: {
kind: 'PColumn',
name: 'Chain',
valueType: 'String',
axesSpec: [...]
},
filterType: 'equals'
selectedFilterValue: 'Heavy'
}, {
inputName: 'filters'
selectedSource: {
kind: 'PColumn',
name: 'FractionOfReads',
valueType: 'Double',
axesSpec: [...]
},
filterType: 'range'
selectedFilterValue: {min: 0}
}];



`
Every input can be mentioned more than one time.




$3


If true there is a button with trash bin icon on the right panel. On click it fires @delete-this-graph:
`
function removeSection() {
... // code to delete current graph from block's state
}


`

$3

If changes graph reapplies options state and default options. (For example, use if you need to reset data-mapping when block's data was recalculated).

$3

Function which filter columns available for data-inputs ('x', 'y', 'Data source', 'Data value'...). By default it filters out columns with 'metadata' in name.
To make available all the columns:

`
v-model="state"
chartType="discrete"
:pFrame="app.model.outputs.pFrame"
:dataColumnPredicate="() => true"
/>
`

How to build locally:


`
npm install
npm run build
`
To link graph-maker local build to local block's build use npm run build && npm run do-pack, it creates package.tgz with local build. Then write in block's root package.json:
`
"pnpm": {
"overrides": {
"@milaboratories/graph-maker": "/path/to/graph-maker/package.tgz"
}
}
`
and run pnpm install && pnpm build` in block.