@milaboratories/graph-maker 1.1.67 → 1.1.69

package/README.md

@@ -12,19 +12,37 @@ import { GraphMaker } from '@milaboratories/graph-maker';
 
 const app = useApp();
 const frameRef = app.model.outputs.pFrame;
-const settings = ref<GraphMakerSettings>({ 
-  chartType: 'discrete', 
+
+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
-      v-if="platforma.pFrameDriver && frameRef && settings"
-      v-model="settings"
-      :p-frame-handle="frameRef"
-      :p-frame-driver="platforma.pFrameDriver"
+      ref="graphMaker"
+      v-model="state"
+      chartType="discrete"
+      :pFrame="app.model.outputs.pFrame"
+      :default-options="defaultOptions"
     />
 </template>
 ```

package/dist/GraphMaker/constantsCommon.d.ts

@@ -218,6 +218,7 @@ export type LayersSettings = {
 export declare const DEFAULT_LAYERS_SETTINGS: () => LayersSettings;
 export declare function getDefaultLayersSettings(): LayersSettings;
 export declare function getInitialLayersSettings(initialSettings?: DeepPartial<LayersSettings>): LayersSettings;
+export type Sorting = 'asc' | 'desc';
 export type AxesState = {
     title: {
         value: string;
@@ -236,6 +237,7 @@ export type AxesState = {
         ticks: boolean;
         scale: Scale;
         significantLinesStyle: LineType;
+        sorting: Sorting;
     };
     axisY: {
         titleMode: AxisTitleMode;
@@ -245,6 +247,7 @@ export type AxesState = {
         ticks: boolean;
         scale: Scale;
         significantLinesStyle: LineType;
+        sorting: Sorting;
     };
     legend: {};
     other: {

package/dist/GraphMaker/index.vue.d.ts

@@ -1,6 +1,7 @@
 import { GraphMakerState } from './types.ts';
 import { PFrameDriver } from '@platforma-sdk/model';
 
+declare function reset(): void;
 declare function __VLS_template(): {
     titleLineSlot?(_: {}): any;
 };
@@ -263,7 +264,14 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
     readonlyInputs: {
         type: import('vue').PropType<("x" | "y" | "filters" | "tabBy" | "facetBy" | "tooltipContent" | "valueSize" | "valueColor")[]>;
     };
-}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+}>, {
+    /**
+     reset() will update data-mapping, axis-settings, layers-settings with the state that is in v-model at the moment.
+     In other cases editing of v-model fields doesn't make any impact to graphs and interface.
+     Besides, after reset default-options will be applied again. You can use reset to apply new default-options.
+     */
+    reset: typeof reset;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "tooltip-btn-click": (...args: any[]) => void;
     "delete-this-graph": (...args: any[]) => void;
     "update-lasso-polygon": (...args: any[]) => void;

package/dist/GraphMaker/store.d.ts

@@ -257,6 +257,7 @@ export declare function createReactiveState(initialData: GraphMakerState, chartT
             ticks: boolean;
             scale: import('./types.ts').Scale;
             significantLinesStyle: import('./components/AesSettings/types').LineType;
+            sorting: import('./constantsCommon.ts').Sorting;
         };
         axisY: {
             titleMode: import('./types.ts').AxisTitleMode;
@@ -266,6 +267,7 @@ export declare function createReactiveState(initialData: GraphMakerState, chartT
             ticks: boolean;
             scale: import('./types.ts').Scale;
             significantLinesStyle: import('./components/AesSettings/types').LineType;
+            sorting: import('./constantsCommon.ts').Sorting;
         };
         legend: {};
         other: {
@@ -579,6 +581,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
                 ticks: boolean;
                 scale: import('./types.ts').Scale;
                 significantLinesStyle: import('./components/AesSettings/types').LineType;
+                sorting: import('./constantsCommon.ts').Sorting;
             };
             axisY: {
                 titleMode: import('./types.ts').AxisTitleMode;
@@ -588,6 +591,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
                 ticks: boolean;
                 scale: import('./types.ts').Scale;
                 significantLinesStyle: import('./components/AesSettings/types').LineType;
+                sorting: import('./constantsCommon.ts').Sorting;
             };
             legend: {};
             other: {
@@ -650,6 +654,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
     loading: {
         initialInputGuide: boolean;
         initialCharts: boolean;
+        initialDefaults: boolean;
         inputGuide: boolean;
         chartData: boolean;
         dendroTableData: boolean;
@@ -676,7 +681,7 @@ export declare function factoryStore(reactiveState: Reactive<ReactiveState>, dat
     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;
 };
 export type Store = ComputedRef<ReturnType<typeof factoryStore>>;
-export declare function provideStore(initialState: GraphMakerState, dataStoreRef: Ref<DemoDataStore | null>, chartType: ChartType, defaultOptions: GraphMakerProps['defaultOptions'], fixedOptionsRef: Ref<GraphMakerProps['fixedOptions']>, dataColumnPredicate?: (spec: PColumnSpec) => boolean, readonlyInputs?: InputNamesByChartType[ChartType][]): ComputedRef<{
+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<{
     reactive: {
         chartType: ChartType;
         template: import('./types.ts').LayersTemplate;
@@ -930,6 +935,7 @@ export declare function provideStore(initialState: GraphMakerState, dataStoreRef
                 ticks: boolean;
                 scale: import('./types.ts').Scale;
                 significantLinesStyle: import('./components/AesSettings/types').LineType;
+                sorting: import('./constantsCommon.ts').Sorting;
             };
             axisY: {
                 titleMode: import('./types.ts').AxisTitleMode;
@@ -939,6 +945,7 @@ export declare function provideStore(initialState: GraphMakerState, dataStoreRef
                 ticks: boolean;
                 scale: import('./types.ts').Scale;
                 significantLinesStyle: import('./components/AesSettings/types').LineType;
+                sorting: import('./constantsCommon.ts').Sorting;
             };
             legend: {};
             other: {
@@ -1001,6 +1008,7 @@ export declare function provideStore(initialState: GraphMakerState, dataStoreRef
     loading: {
         initialInputGuide: boolean;
         initialCharts: boolean;
+        initialDefaults: boolean;
         inputGuide: boolean;
         chartData: boolean;
         dendroTableData: boolean;

package/dist/GraphMaker/types.d.ts

@@ -8,13 +8,22 @@ export type DeepPartial<T> = {
     [P in keyof T]?: Partial<T[P]>;
 };
 export type GraphMakerState = {
+    /** Editable title on the top */
     title: string;
+    /** 'box', 'violins', 'dots' etc, depends on chart type */
     template: LayersTemplate;
+    /** Optional part, used for data saving to ui-state; don't need to be set in initial settings,
+      it appears in settings after changes in user interface */
     currentTab?: FormKey | null;
+    /** Data-mapping state, use inner-generated keys to keep selected columns, use default-options prop to set defaults */
     optionsState?: InputState;
+    /** Saved settings of p-value (for discrete charts), trends (for scatterplot) */
     statisticsSettings?: DeepPartial<StatisticsState>;
+    /** Settings of grid, axes titles, facet positions, grouping order*/
     axesSettings?: DeepPartial<AxesState>;
+    /** Settings for every type of layer, aesthetics */
     layersSettings?: DeepPartial<LayersSettings>;
+    /** Saved palettes and color-mapping settings linked to columns/axes */
     dataBindAes?: Record<string, AestheticMappingCategorical>;
 };
 export type PredefinedGraphOption<T extends ChartType> = {