@milaboratories/graph-maker 1.1.67 → 1.1.68
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +24 -6
- package/dist/GraphMaker/index.vue.d.ts +9 -1
- package/dist/GraphMaker/store.d.ts +3 -1
- package/dist/GraphMaker/types.d.ts +9 -0
- package/dist/graph-maker.js +8224 -8194
- package/dist/graph-maker.umd.cjs +89 -89
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,19 +12,37 @@ import { GraphMaker } from '@milaboratories/graph-maker';
|
|
|
12
12
|
|
|
13
13
|
const app = useApp();
|
|
14
14
|
const frameRef = app.model.outputs.pFrame;
|
|
15
|
-
|
|
16
|
-
|
|
15
|
+
|
|
16
|
+
const state = ref<GraphMakerSettings>({
|
|
17
17
|
template: 'box',
|
|
18
18
|
title: 'My graph'
|
|
19
19
|
});
|
|
20
|
+
|
|
21
|
+
const defaultOptions:PredefinedGraphOption<'discrete'>[] = [{
|
|
22
|
+
inputName: 'y',
|
|
23
|
+
selectedSource: {
|
|
24
|
+
kind: 'PColumn',
|
|
25
|
+
axesSpec: [...],
|
|
26
|
+
valueType: 'Int',
|
|
27
|
+
name: 'columnNameOfSomeYColumn',
|
|
28
|
+
}
|
|
29
|
+
}];
|
|
30
|
+
|
|
31
|
+
const graphMakerRef = useTemplateRef('graphMaker');
|
|
32
|
+
function reset() {
|
|
33
|
+
state.value = {...} // new graph state, empty or not;
|
|
34
|
+
graphMakerRef.value?.reset();
|
|
35
|
+
}
|
|
36
|
+
|
|
20
37
|
</script>
|
|
21
38
|
|
|
22
39
|
<template>
|
|
23
40
|
<graph-maker
|
|
24
|
-
|
|
25
|
-
v-model="
|
|
26
|
-
|
|
27
|
-
:
|
|
41
|
+
ref="graphMaker"
|
|
42
|
+
v-model="state"
|
|
43
|
+
chartType="discrete"
|
|
44
|
+
:pFrame="app.model.outputs.pFrame"
|
|
45
|
+
:default-options="defaultOptions"
|
|
28
46
|
/>
|
|
29
47
|
</template>
|
|
30
48
|
```
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { GraphMakerState } from './types.ts';
|
|
2
2
|
import { PFrameDriver } from '@platforma-sdk/model';
|
|
3
3
|
|
|
4
|
+
declare function reset(): void;
|
|
4
5
|
declare function __VLS_template(): {
|
|
5
6
|
titleLineSlot?(_: {}): any;
|
|
6
7
|
};
|
|
@@ -263,7 +264,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
|
|
|
263
264
|
readonlyInputs: {
|
|
264
265
|
type: import('vue').PropType<("x" | "y" | "filters" | "tabBy" | "facetBy" | "tooltipContent" | "valueSize" | "valueColor")[]>;
|
|
265
266
|
};
|
|
266
|
-
}>, {
|
|
267
|
+
}>, {
|
|
268
|
+
/**
|
|
269
|
+
reset() will update data-mapping, axis-settings, layers-settings with the state that is in v-model at the moment.
|
|
270
|
+
In other cases editing of v-model fields doesn't make any impact to graphs and interface.
|
|
271
|
+
Besides, after reset default-options will be applied again. You can use reset to apply new default-options.
|
|
272
|
+
*/
|
|
273
|
+
reset: typeof reset;
|
|
274
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
|
|
267
275
|
"tooltip-btn-click": (...args: any[]) => void;
|
|
268
276
|
"delete-this-graph": (...args: any[]) => void;
|
|
269
277
|
"update-lasso-polygon": (...args: any[]) => void;
|
|
@@ -650,6 +650,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
|
|
|
650
650
|
loading: {
|
|
651
651
|
initialInputGuide: boolean;
|
|
652
652
|
initialCharts: boolean;
|
|
653
|
+
initialDefaults: boolean;
|
|
653
654
|
inputGuide: boolean;
|
|
654
655
|
chartData: boolean;
|
|
655
656
|
dendroTableData: boolean;
|
|
@@ -676,7 +677,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
|
|
|
676
677
|
readonlyInputs: ("label" | "height" | "size" | "x" | "y" | "value" | "lineColor" | "primaryGrouping" | "secondaryGrouping" | "grouping" | "filters" | "tabBy" | "facetBy" | "shape" | "tooltipContent" | "xGroupBy" | "yGroupBy" | "annotationsX" | "annotationsY" | "labels" | "tableContent" | "nodeColor" | "nodeShape" | "nodeSize" | "heatmapForSequence" | "heatmapAnnotation" | "heatmapAxis" | "heatmapGroup" | "valueSize" | "valueColor")[] | undefined;
|
|
677
678
|
};
|
|
678
679
|
export type Store = ComputedRef<ReturnType<typeof factoryStore>>;
|
|
679
|
-
export declare function provideStore(initialState: GraphMakerState, dataStoreRef: Ref<DemoDataStore | null>, chartType: ChartType,
|
|
680
|
+
export declare function provideStore(initialState: GraphMakerState, dataStoreRef: Ref<DemoDataStore | null>, chartType: ChartType, defaultOptionsRef: Ref<GraphMakerProps['defaultOptions']>, fixedOptionsRef: Ref<GraphMakerProps['fixedOptions']>, dataColumnPredicate?: (spec: PColumnSpec) => boolean, readonlyInputs?: InputNamesByChartType[ChartType][]): ComputedRef<{
|
|
680
681
|
reactive: {
|
|
681
682
|
chartType: ChartType;
|
|
682
683
|
template: import('./types.ts').LayersTemplate;
|
|
@@ -1001,6 +1002,7 @@ export declare function provideStore(initialState: GraphMakerState, dataStoreRef
|
|
|
1001
1002
|
loading: {
|
|
1002
1003
|
initialInputGuide: boolean;
|
|
1003
1004
|
initialCharts: boolean;
|
|
1005
|
+
initialDefaults: boolean;
|
|
1004
1006
|
inputGuide: boolean;
|
|
1005
1007
|
chartData: boolean;
|
|
1006
1008
|
dendroTableData: boolean;
|
|
@@ -8,13 +8,22 @@ export type DeepPartial<T> = {
|
|
|
8
8
|
[P in keyof T]?: Partial<T[P]>;
|
|
9
9
|
};
|
|
10
10
|
export type GraphMakerState = {
|
|
11
|
+
/** Editable title on the top */
|
|
11
12
|
title: string;
|
|
13
|
+
/** 'box', 'violins', 'dots' etc, depends on chart type */
|
|
12
14
|
template: LayersTemplate;
|
|
15
|
+
/** Optional part, used for data saving to ui-state; don't need to be set in initial settings,
|
|
16
|
+
it appears in settings after changes in user interface */
|
|
13
17
|
currentTab?: FormKey | null;
|
|
18
|
+
/** Data-mapping state, use inner-generated keys to keep selected columns, use default-options prop to set defaults */
|
|
14
19
|
optionsState?: InputState;
|
|
20
|
+
/** Saved settings of p-value (for discrete charts), trends (for scatterplot) */
|
|
15
21
|
statisticsSettings?: DeepPartial<StatisticsState>;
|
|
22
|
+
/** Settings of grid, axes titles, facet positions, grouping order*/
|
|
16
23
|
axesSettings?: DeepPartial<AxesState>;
|
|
24
|
+
/** Settings for every type of layer, aesthetics */
|
|
17
25
|
layersSettings?: DeepPartial<LayersSettings>;
|
|
26
|
+
/** Saved palettes and color-mapping settings linked to columns/axes */
|
|
18
27
|
dataBindAes?: Record<string, AestheticMappingCategorical>;
|
|
19
28
|
};
|
|
20
29
|
export type PredefinedGraphOption<T extends ChartType> = {
|