polymatica-widget 2.0.20 → 2.1.0

package/LICENSE

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright 2021 Polymatica
+Copyright 2021-2022 Polymatica
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

package/__internal__/widget-options.d.ts

@@ -1,4 +1,4 @@
-import { Text } from '../locale';
+import { Text } from "../locale";
 export declare enum WidgetOptionType {
     Title = "title",
     Label = "label",

package/__internal__/widget-options.js

@@ -29,7 +29,7 @@ function valueConversion(type, source) {
     switch (type) {
         case WidgetOptionType.Text:
         case WidgetOptionType.Title:
-            return source ? String(source) : '';
+            return source ? String(source) : "";
         case WidgetOptionType.Number:
         case WidgetOptionType.Range:
             return source ? parseFloat(source) : 0;
@@ -46,7 +46,7 @@ function valueConversion(type, source) {
         case WidgetOptionType.DateTime:
             return parseDate(source);
         case WidgetOptionType.Time:
-            return source || '00:00';
+            return source || "00:00";
         case WidgetOptionType.DateInterval:
             if (source)
                 return {
@@ -61,7 +61,7 @@ function valueConversion(type, source) {
         case WidgetOptionType.Checkbox:
             return Boolean(source);
         default:
-            return '';
+            return "";
     }
 }
 exports.valueConversion = valueConversion;

package/config.d.ts

@@ -1,7 +1,7 @@
-import { Column } from './dataset';
-import { Text } from './locale';
-import { Options } from './widget';
-import { WidgetOptionConfig } from './__internal__/widget-options';
+import { ColumnType } from "./dataset";
+import { Text } from "./locale";
+import { Options } from "./widget";
+import { WidgetOptionConfig } from "./__internal__/widget-options";
 export declare enum Size {
     Small = "small",
     Medium = "medium",
@@ -16,13 +16,14 @@ export interface WidgetConfig {
     label: Text;
     icon: string;
     size: Size | [Size, Size];
+    useTranslations?: boolean;
 }
 export interface SingleData {
-    data: DataConfig;
+    data: DataConfig | (DataConfig & Repeatable);
 }
-export declare type MultiData<DataItemKeys extends string, RepeatableKeys extends DataItemKeys = never> = {
+export declare type MultiData<DataItemKeys extends string> = {
     data: {
-        [Key in DataItemKeys]: Key extends RepeatableKeys ? DataConfig & Repeatable : DataConfig;
+        [Key in DataItemKeys]: DataConfig | (DataConfig & Repeatable);
     };
 };
 export interface Repeatable {
@@ -54,26 +55,28 @@ export interface Block {
 }
 export interface OptionsConfig {
     options: {
-        provider: OptionsProvider;
+        provider(options: Options, data: unknown): Option[];
         default: Options;
         validators?: OptionsValidation;
     };
 }
-declare class Option {
-    readonly config: WidgetOptionConfig;
-    constructor(_: symbol, config: WidgetOptionConfig);
-}
-export declare const STEP = 24;
-export declare type OptionsProvider<Data extends SelectedData | SelectedMultiData<string> | SelectedMultiData<any, string> | undefined = undefined> = (options: Options, data: Data) => Option[];
-export interface SelectedData {
-    columns: Column[];
-    columnsByBlock: {
+export declare type DataFromConfig<T> = T extends SingleData & Repeatable ? Data[] : T extends SingleData ? Data : T extends MultiData<infer DataItemKeys> ? {
+    [Key in DataItemKeys]: T["data"][Key] extends Repeatable ? Data[] : Data;
+} : never;
+interface Data {
+    readonly columns: Column[];
+    readonly columnsByBlock: {
         [blockKey: string]: Column[];
     };
 }
-export declare type SelectedMultiData<DataItemKeys extends string, RepeatableKeys extends DataItemKeys = never> = {
-    [Key in DataItemKeys]: Key extends RepeatableKeys ? SelectedData[] : SelectedData;
-};
+interface Column {
+    readonly name: string;
+    readonly type: ColumnType;
+}
+declare class Option {
+    constructor(config: WidgetOptionConfig);
+}
+export declare const STEP = 24;
 export declare function title(label: Text, params?: {
     hint: Text;
 }): Option;

package/config.js

@@ -16,14 +16,12 @@ var Method;
     Method["PivotTable"] = "pivot";
 })(Method = exports.Method || (exports.Method = {}));
 // widget options
-const token = Symbol();
 class Option {
-    constructor(_, config) {
-        if (_ !== token)
-            throw '';
-        Object.defineProperty(this, 'config', {
-            get() {
-                return Object.seal(config);
+    constructor(config) {
+        const value = Object.seal(config);
+        Object.defineProperty(this, "toJSON", {
+            value() {
+                return value;
             },
         });
     }
@@ -34,22 +32,22 @@ function title(label, params) {
     const options = [];
     if (params === null || params === void 0 ? void 0 : params.hint)
         options.push({ label: params.hint, value: 0 });
-    return new Option(token, { type: widget_options_1.WidgetOptionType.Title, label });
+    return new Option({ type: widget_options_1.WidgetOptionType.Title, label });
 }
 exports.title = title;
 function label(label, params) {
     const options = [];
     if (params === null || params === void 0 ? void 0 : params.hint)
         options.push({ label: params.hint, value: 0 });
-    return new Option(token, { type: widget_options_1.WidgetOptionType.Label, label, options });
+    return new Option({ type: widget_options_1.WidgetOptionType.Label, label, options });
 }
 exports.label = label;
 function spacer(span) {
-    return new Option(token, { type: widget_options_1.WidgetOptionType.Spacer, span });
+    return new Option({ type: widget_options_1.WidgetOptionType.Spacer, span });
 }
 exports.spacer = spacer;
 function line() {
-    return new Option(token, {
+    return new Option({
         type: widget_options_1.WidgetOptionType.LineHorizontal,
         span: 0,
     });
@@ -57,54 +55,54 @@ function line() {
 exports.line = line;
 // controls
 function text(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Text }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Text }));
 }
 exports.text = text;
 function number(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Number }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Number }));
 }
 exports.number = number;
 function integer(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Integer }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Integer }));
 }
 exports.integer = integer;
 function range(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Range }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Range }));
 }
 exports.range = range;
 function interval(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Interval }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Interval }));
 }
 exports.interval = interval;
 function date(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Date }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Date }));
 }
 exports.date = date;
 function time(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Time }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Time }));
 }
 exports.time = time;
 function dateTime(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.DateTime }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.DateTime }));
 }
 exports.dateTime = dateTime;
 function checkbox(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Checkbox }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Checkbox }));
 }
 exports.checkbox = checkbox;
 function radio(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Radio }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Radio }));
 }
 exports.radio = radio;
 function radioButton(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.RadioButtons }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.RadioButtons }));
 }
 exports.radioButton = radioButton;
 function select(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.Select }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.Select }));
 }
 exports.select = select;
 function colorPicker(params) {
-    return new Option(token, Object.assign({ type: widget_options_1.WidgetOptionType.ColorPicker }, params));
+    return new Option(Object.assign(Object.assign({}, params), { type: widget_options_1.WidgetOptionType.ColorPicker }));
 }
 exports.colorPicker = colorPicker;

package/dataset.d.ts

@@ -6,13 +6,29 @@ export declare enum ColumnType {
     Object = "object",
     Boolean = "boolean"
 }
+export interface Dataset {
+    readonly columns: Column[];
+    readonly columnsByBlock: {
+        [blockKey: string]: Column[];
+    };
+    readonly rows: DatasetRow[];
+    readonly heatmap: {
+        [path: Column["path"]]: Heatmap;
+    };
+    readonly events: {
+        onHighlight: (rowIndexArray: number[]) => void;
+    };
+}
+export interface Heatmap {
+    getColor(value: number): string;
+}
 export interface DatasetRow {
     [path: string]: any;
 }
 export interface Column {
-    type: ColumnType;
-    name: string;
-    path: string;
+    readonly type: ColumnType;
+    readonly name: string;
+    readonly path: string;
     interact(rowIndex: number): void;
     format(value: any): string;
 }

package/index.d.ts

@@ -1,5 +1,5 @@
-export * from './dataset';
-export * from './declare';
-export * from './locale';
-export * from './theme';
-export * from './widget';
+export * from "./dataset";
+export * from "./locale";
+export * from "./provide-data";
+export * from "./theme";
+export * from "./widget";

package/index.js

@@ -15,7 +15,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./dataset"), exports);
-__exportStar(require("./declare"), exports);
 __exportStar(require("./locale"), exports);
+__exportStar(require("./provide-data"), exports);
 __exportStar(require("./theme"), exports);
 __exportStar(require("./widget"), exports);

package/locale.d.ts

@@ -1,2 +1,2 @@
-export declare type Locale = 'ru' | 'en';
+export declare type Locale = "ru" | "en";
 export declare type Text = Record<Locale, string>;

package/package.json

@@ -1,11 +1,12 @@
 {
     "name": "polymatica-widget",
-    "version": "2.0.20",
+    "version": "2.1.0",
     "description": "SDK для создания виджетов для платформы Polymatica",
     "keywords": [],
     "license": "ISC",
     "main": "index.js",
     "dependencies": {
-        "logical-not": "^1.0.9"
+        "logical-not": "^1.0.9",
+        "polymatica-jsx": "^1.0.0"
     }
 }

package/provide-data.d.ts

@@ -0,0 +1,11 @@
+import { MultiData, Repeatable, SingleData } from "./config";
+import { Dataset } from "./dataset";
+export declare type ProvideData<T> = T extends SingleData & Repeatable ? {
+    readonly datasets: Dataset[];
+} : T extends SingleData ? {
+    readonly dataset: Dataset;
+} : T extends MultiData<infer DataItemKeys> ? {
+    readonly datasets: {
+        [Key in DataItemKeys]: T["data"][Key] extends Repeatable ? Dataset[] : Dataset;
+    };
+} : never;

package/provide-data.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/theme.d.ts

@@ -1,8 +1,3 @@
 export interface Theme {
-    text: {
-        primary: string;
-        secondary: string;
-    };
     palette: string[];
-    heatmap: string[][];
 }

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "experimentalDecorators": true,
+        "jsx": "react-jsx",
+        "jsxImportSource": "polymatica-jsx",
+        "lib": ["ES2022", "DOM"],
+        "module": "CommonJS",
+        "moduleResolution": "Node",
+        "strict": true,
+        "target": "ES2022",
+        "types": ["polymatica-jsx/types"]
+    },
+
+    "include": ["../../src"]
+}

package/widget.d.ts

@@ -1,48 +1,20 @@
-import { Column, DatasetRow } from './dataset';
-import { Locale } from './locale';
-import { Theme } from './theme';
+import { JsxElement } from "polymatica-jsx";
+import { Locale } from "./locale";
+import { Theme } from "./theme";
 export declare abstract class Widget {
-    readonly options: Options;
     readonly theme: Theme;
     readonly lang: Locale;
     readonly renderEnv: WidgetRenderEnv;
-    ready(): void;
     init(): void;
-    abstract onChange(): void;
+    ready(): void;
+    abstract render(): JsxElement;
+    onChange(): void;
     onThemeChange(): void;
     onLangChange(): void;
+    translate(key: string, interpolate?: any): string;
 }
-export interface SingleData {
-    readonly dataset: Dataset;
-}
-export interface MultiData<DataKeys extends string> {
-    readonly datasets: Record<DataKeys, Dataset>;
-}
-export declare type Repeatable<Data extends SingleData | MultiData<string>, RepeatableKeys extends GetMultiDataKeys<Data> | never = never> = Data extends SingleData ? {
-    readonly datasets: Dataset[];
-} : RepeatableKeys extends string ? {
-    readonly datasets: Record<Exclude<GetMultiDataKeys<Data>, RepeatableKeys>, Dataset> & Record<RepeatableKeys, Dataset[]>;
-} : never;
-declare type GetMultiDataKeys<T> = T extends MultiData<infer U> ? U : never;
-export declare type Provide<T> = T extends {
-    dataset: infer U;
-} ? U : T extends {
-    datasets: infer U;
-} ? U : never;
-export interface Dataset {
-    columns: Column[];
-    columnsByBlock: {
-        [blockKey: string]: Column[];
-    };
-    rows: DatasetRow[];
-    heatmap: HeatmapItem[];
-    events: {
-        onHighlight: (rowIndexArray: number[]) => void;
-    };
-}
-export interface HeatmapItem {
-    column: Column;
-    getColor(value: number): string;
+export interface HasOptions {
+    readonly options: Options;
 }
 export interface Options {
     [key: string]: any;
@@ -51,4 +23,3 @@ export declare enum WidgetRenderEnv {
     Default = "default",
     Print = "print"
 }
-export {};

package/widget.js

@@ -5,10 +5,18 @@ class Widget {
     constructor() {
         this.renderEnv = WidgetRenderEnv.Default;
     }
-    ready() { }
     init() { }
-    onThemeChange() { }
-    onLangChange() { }
+    ready() { }
+    onChange() { }
+    onThemeChange() {
+        this.render();
+    }
+    onLangChange() {
+        this.render();
+    }
+    translate(key, interpolate) {
+        return "";
+    }
 }
 exports.Widget = Widget;
 var WidgetRenderEnv;

package/__internal__/io.d.ts

@@ -1,68 +0,0 @@
-import { Column } from '../dataset';
-import { Locale } from '../locale';
-import { Theme } from '../theme';
-import { Dataset, Options, WidgetRenderEnv } from '../widget';
-export declare enum Input {
-    Change = "poly.input.change",
-    ChangeWidgetRenderEnv = "poly.input.changeWidgetRenderEnv",
-    ChangeLang = "poly.input.changeLang",
-    ChangeTheme = "poly.input.changeTheme",
-    Highlight = "poly.input.highlight",
-    UnHighlight = "poly.input.unhighlight"
-}
-export declare enum Output {
-    Init = "poly.output.init",
-    Ready = "poly.output.ready",
-    Interact = "poly.output.interact"
-}
-export declare type InputColumn = Omit<Column, 'interact'> & {
-    columnId: number;
-};
-export declare type InputDataset = Omit<Dataset, 'columns' | 'columnsByBlock' | 'events'> & {
-    datasetId: number;
-    columns: InputColumn[];
-    columnsByBlock: Record<string, number[]>;
-};
-export interface InputSingleData {
-    readonly dataset: InputDataset;
-}
-export interface InputMultiData {
-    readonly datasets: {
-        [datasetKey: string]: InputDataset;
-    };
-}
-export declare type InputRepeatable<T extends InputSingleData | InputMultiData> = T extends InputSingleData ? {
-    readonly datasets: InputDataset[];
-} : {
-    readonly datasets: {
-        [datasetKey: string]: InputDataset | InputDataset[];
-    };
-};
-export declare type InputData = InputSingleData | InputMultiData | InputRepeatable<InputSingleData> | InputRepeatable<InputMultiData>;
-export interface InputParameter extends Record<Input, any> {
-    [Input.Change]: [InputData, Options];
-    [Input.ChangeWidgetRenderEnv]: WidgetRenderEnv;
-    [Input.ChangeLang]: Locale;
-    [Input.ChangeTheme]: Theme;
-    [Input.Highlight]: {
-        datasetId: number;
-        rowIndexArray: number[];
-    };
-    [Input.UnHighlight]: {
-        datasetId: number;
-    };
-}
-export interface OutputParameter extends Record<Output, any> {
-    [Output.Init]: void;
-    [Output.Ready]: void;
-    [Output.Interact]: {
-        datasetId: number;
-        columnId: number;
-        dataIndex: number;
-    };
-}
-export interface OutputData {
-    token: string;
-    type: Output;
-    payload?: any;
-}

package/__internal__/io.js

@@ -1,18 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Output = exports.Input = void 0;
-var Input;
-(function (Input) {
-    Input["Change"] = "poly.input.change";
-    Input["ChangeWidgetRenderEnv"] = "poly.input.changeWidgetRenderEnv";
-    Input["ChangeLang"] = "poly.input.changeLang";
-    Input["ChangeTheme"] = "poly.input.changeTheme";
-    Input["Highlight"] = "poly.input.highlight";
-    Input["UnHighlight"] = "poly.input.unhighlight";
-})(Input = exports.Input || (exports.Input = {}));
-var Output;
-(function (Output) {
-    Output["Init"] = "poly.output.init";
-    Output["Ready"] = "poly.output.ready";
-    Output["Interact"] = "poly.output.interact";
-})(Output = exports.Output || (exports.Output = {}));

package/declare.d.ts

@@ -1 +0,0 @@
-export declare function Declare(): ClassDecorator;

package/declare.js

@@ -1,141 +0,0 @@
-"use strict";
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.Declare = void 0;
-const logical_not_1 = require("logical-not");
-const io_1 = require("./__internal__/io");
-const datasetMap = new Map();
-function Declare() {
-    return (T) => {
-        const instance = new T();
-        const token = readFromUrl('token');
-        Object.assign(instance, {
-            options: {},
-            ready() {
-                output(token, io_1.Output.Ready);
-            },
-        });
-        let inited = false;
-        input(io_1.Input.Change, ([data, options]) => {
-            provideTo(instance, data, token);
-            set(instance, 'options', options);
-            if ((0, logical_not_1.not)(inited)) {
-                inited = true;
-                call(instance, 'init');
-            }
-            call(instance, 'onChange');
-        });
-        input(io_1.Input.ChangeWidgetRenderEnv, value => set(instance, 'renderEnv', value));
-        input(io_1.Input.ChangeLang, lang => {
-            set(instance, 'lang', lang);
-            if (inited)
-                call(instance, 'onLangChange');
-        });
-        input(io_1.Input.ChangeTheme, theme => {
-            set(instance, 'theme', theme);
-            if (inited)
-                call(instance, 'onThemeChange');
-        });
-        input(io_1.Input.Highlight, ({ datasetId, rowIndexArray }) => {
-            const dataset = datasetMap.get(datasetId);
-            dataset === null || dataset === void 0 ? void 0 : dataset.events.onHighlight(rowIndexArray);
-        });
-        output(token, io_1.Output.Init);
-        return T;
-    };
-}
-exports.Declare = Declare;
-function provideTo(widget, source, token) {
-    datasetMap.clear();
-    if ('dataset' in source) {
-        const { dataset } = source;
-        Object.assign(widget, {
-            dataset: transform(dataset, token),
-        });
-    }
-    else {
-        if (Array.isArray(source)) {
-            const { datasets } = source;
-            Object.assign(widget, {
-                datasets: datasets.map(dataset => transform(dataset, token)),
-            });
-        }
-        else {
-            const datasets = {};
-            Object.entries(source).forEach(([key, item]) => {
-                if (Array.isArray(item)) {
-                    datasets[key] = item.map(dataset => transform(dataset, token));
-                }
-                else {
-                    datasets[key] = transform(item, token);
-                }
-            });
-            Object.assign(widget, { datasets });
-        }
-    }
-}
-function transform(source, token) {
-    const { datasetId, columns: sourceColumns, columnsByBlock: sourceColumnsByBlock } = source, slice = __rest(source, ["datasetId", "columns", "columnsByBlock"]);
-    const columnsById = new Map();
-    const columns = sourceColumns.map((_a) => {
-        var { columnId } = _a, source = __rest(_a, ["columnId"]);
-        const column = Object.assign(Object.assign({}, source), { interact(rowIndex) {
-                output(token, io_1.Output.Interact, {
-                    datasetId,
-                    columnId,
-                    dataIndex: rowIndex,
-                });
-            } });
-        columnsById.set(columnId, column);
-        return column;
-    });
-    const columnsByBlock = {};
-    Object.entries(sourceColumnsByBlock).forEach(([blockKey, columnIds]) => {
-        columnsByBlock[blockKey] = [];
-        columnIds.forEach(id => {
-            const column = columnsById.get(id);
-            if (column)
-                columnsByBlock[blockKey].push(column);
-        });
-    });
-    const dataset = Object.assign(Object.assign({}, slice), { columns,
-        columnsByBlock, events: {
-            onHighlight() { },
-        } });
-    datasetMap.set(datasetId, dataset);
-    return dataset;
-}
-function set(instance, key, value) {
-    instance[key] = value;
-}
-function call(instance, method) {
-    if (typeof instance[method] === 'function')
-        instance[method]();
-}
-function input(type, callback) {
-    window.addEventListener('message', ({ data }) => {
-        if (data.type === type)
-            callback(data.payload);
-    });
-}
-function output(token, type, payload) {
-    const message = { type, token, payload };
-    window.parent.postMessage(message, '*');
-}
-function readFromUrl(key) {
-    const startsWith = key + '=';
-    const source = window.location.search
-        .split(/[?&]/)
-        .find(item => item.startsWith(startsWith));
-    return source ? source.slice(startsWith.length) : '';
-}