@milaboratories/graph-maker

Vue-component including graph settings interface and resulting rendered graph.

How to use:

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useApp } from './app';
import { platforma } from '@platforma-open/milaboratories.graph-maker.model';
import { GraphMakerSettings } from '@milaboratories/graph-maker/dist/GraphMaker/types';
import { GraphMaker } from '@milaboratories/graph-maker';

const app = useApp();
const frameRef = app.model.outputs.pFrame;

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

const defaultOptions:PredefinedGraphOption<'discrete'>[] = [{
    inputName: 'y',
    selectedSource: {
        kind: 'PColumn',
        axesSpec: [...],
        valueType: 'Int',
        name: 'columnNameOfSomeYColumn',
    }
}];

const graphMakerRef = useTemplateRef('graphMaker');
function reset() {
    state.value = {...} // new graph state, empty or not;
    graphMakerRef.value?.reset();
}

</script>

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

How to build locally:

npm install
npm run build