npm package: @milaboratories/graph-maker
Description: Vue-component including graph settings interface and resulting rendered graph. For using graph only (creating picture without user interface) use [miplots4](https://github.com/milaboratory/miplots4).
Latest version: 1.2.10

Vue-component including graph settings interface and resulting rendered graph.
For using graph only (creating picture without user interface) use [miplots4](https://github.com/milaboratory/miplots4).

# How to connect

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

```
<script setup lang="ts">
import { ref } from 'vue';
import { useApp } from './app';
import { GraphMakerState, GraphMaker } from '@milaboratories/graph-maker';

const app = useApp();
const state = ref<GraphMakerSettings>({
  template: 'box',
  title: 'My graph'
});

</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
    />
</template>
```

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](./src/GraphMaker/types.ts). 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](https://github.com/milaboratory/platforma/blob/main/sdk/model/src/components/PFrameForGraphs.ts) 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

### defaultOptions

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](https://github.com/milaboratory/platforma/blob/main/docs/pcolumn.md), [types](https://github.com/milaboratory/platforma/blob/main/lib/model/common/src/drivers/pframe/spec/spec.ts)) 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}
}];
</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
      :defaultOptions="defaultOptions"
    />
</template>
```

Every input can be mentioned more than one time.

### allowChartDeleting

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
}
</script>

<template>
    <graph-maker
      v-model="state"
      chartType="discrete"
      :pFrame="app.model.outputs.pFrame"
      :allowChartDeleting="true"
      @delete-this-graph="removeSection"
    />
</template>
```

### dataStateKey

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).

### dataColumnPredicate

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:

```
<graph-maker
  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.