@progress/kendo-vue-gauges 2.7.1 → 2.7.3-dev.202201070829

package/dist/npm/store/reducer.js

@@ -0,0 +1,105 @@
+"use strict";
+var __spreadArrays = (this && this.__spreadArrays) || function () {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.observersReducer = exports.themeReducer = exports.optionsReducer = void 0;
+/**
+ * @hidden
+ */
+var optionsReducer = function (currentState, action) {
+    if (action.gaugeCollectionIdxKey) {
+        return reducers.collectionConfigurationItem(currentState, action);
+    }
+    else if (action.gaugeKey) {
+        return reducers.configurationItem(currentState, action);
+    }
+    else {
+        return {};
+    }
+};
+exports.optionsReducer = optionsReducer;
+/**
+ * @hidden
+ */
+var themeReducer = function (currentState, action) {
+    if (action.type) {
+        switch (action.type) {
+            case 'set':
+                return reducers.themeItem(currentState, action);
+            case 'push':
+                return Object.assign(currentState, action.payload);
+            default:
+                return currentState;
+        }
+    }
+    else {
+        return {};
+    }
+};
+exports.themeReducer = themeReducer;
+/**
+ * @hidden
+ */
+var observersReducer = function (currentState, action) {
+    if (action.type) {
+        switch (action.type) {
+            case 'add':
+                return __spreadArrays(currentState, [action.payload]);
+            case 'remove':
+                return currentState.filter(function (element) { return element !== action.payload; });
+            default:
+                return currentState;
+        }
+    }
+    else {
+        return [];
+    }
+};
+exports.observersReducer = observersReducer;
+/**
+ * @hidden
+ */
+var reducers = {
+    configurationItem: function (currentState, action) {
+        var _a;
+        return Object.assign(currentState, (_a = {},
+            _a[action.gaugeKey] = action.payload,
+            _a));
+    },
+    collectionConfigurationItem: function (currentState, action) {
+        var _a;
+        var inCollection = false;
+        var _b = action.gaugeCollectionIdxKey.split('_'), collectionName = _b[0], collectionIdx = _b[1];
+        var collection = currentState[collectionName].map(function (item, index) {
+            if (parseInt(collectionIdx, 10) === index) {
+                inCollection = true;
+                return action.payload;
+            }
+            return item;
+        });
+        if (inCollection === false) {
+            collection.splice(parseInt(collectionIdx, 10), 0, action.payload);
+        }
+        return Object.assign(currentState, (_a = {},
+            _a[collectionName] = collection,
+            _a));
+    },
+    themeItem: function (currentState, action) {
+        var store = {};
+        var nextStore = Object.assign(store, currentState);
+        var _a = action.payload, field = _a.field, value = _a.value;
+        var parts = field.split('.');
+        var key = parts.shift();
+        while (parts.length > 0) {
+            store = store[key] = store[key] || {};
+            key = parts.shift();
+        }
+        store[key] = value;
+        return nextStore;
+    }
+};

package/dist/npm/store/store.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @hidden
+ */
+export declare const THROTTLE_MS: number;
+/**
+ * @hidden
+ */
+export interface StoreAction {
+    gaugeKey?: string;
+    gaugeCollectionIdxKey?: string;
+    type?: string;
+    payload: any;
+}
+/**
+ * @hidden
+ */
+export interface Store {
+    getState(): any;
+    dispatch(action: StoreAction | object): void;
+    subscribe(f: Function): Function;
+}
+/**
+ * @hidden
+ */
+declare const createStore: (reducer: any) => Store;
+export default createStore;

package/dist/npm/store/store.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.THROTTLE_MS = void 0;
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+/**
+ * @hidden
+ */
+exports.THROTTLE_MS = 1000 / 60;
+/**
+ * @hidden
+ */
+var createStore = function (reducer) {
+    var state;
+    var timerId;
+    var listeners = [];
+    var getState = function () { return state; };
+    var dispatch = function (action) {
+        state = reducer(state, action);
+        if (kendo_vue_common_1.canUseDOM) {
+            window.clearTimeout(timerId);
+            timerId = window.setTimeout(function () { return listeners.forEach(function (l) { return l(); }); }, exports.THROTTLE_MS);
+        }
+    };
+    var subscribe = function (listener) {
+        listeners.push(listener);
+        return function () { return listeners = listeners.filter(function (l) { return l !== listener; }); };
+    };
+    dispatch({});
+    return { getState: getState, dispatch: dispatch, subscribe: subscribe };
+};
+exports.default = createStore;

package/dist/npm/theming/theme-service.d.ts

@@ -0,0 +1,3 @@
+import { Store } from './../store/store';
+declare const loadTheme: (store: Store, done: any) => void;
+export { loadTheme };

package/dist/npm/theming/theme-service.js

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTheme = void 0;
+var kendo_charts_1 = require("@progress/kendo-charts");
+var template = "\n    <div class=\"k-var--gauge-pointer\"></div>\n    <div class=\"k-var--gauge-track\"></div>\n    <div class=\"k-var--normal-text-color\"></div>\n";
+/**
+ * @hidden
+ */
+var ThemeService = /** @class */ (function () {
+    function ThemeService(store) {
+        this.store = store;
+    }
+    ThemeService.prototype.setStyle = function (field, value) {
+        this.store.dispatch({ type: 'set', payload: { field: field, value: value } });
+    };
+    ThemeService.prototype.setColors = function () {
+        this.mapColor('pointer.color', 'gauge-pointer');
+        this.mapColor('scale.rangePlaceholderColor', 'gauge-track');
+        this.mapColor('scale.labels.color', 'normal-text-color');
+        this.mapColor('scale.minorTicks.color', 'normal-text-color');
+        this.mapColor('scale.majorTicks.color', 'normal-text-color');
+        this.mapColor('scale.line.color', 'normal-text-color');
+    };
+    ThemeService.prototype.mapColor = function (key, varName) {
+        this.setStyle(key, this.queryStyle(varName).backgroundColor);
+    };
+    ThemeService.prototype.queryStyle = function (varName) {
+        var element = this.element;
+        return window.getComputedStyle(element.querySelector(".k-var--" + varName));
+    };
+    return ThemeService;
+}());
+var loadTheme = function (store, done) {
+    var service = new ThemeService(store);
+    if (typeof document === 'undefined') {
+        store.dispatch({ type: 'push', payload: kendo_charts_1.chartBaseTheme() });
+        return;
+    }
+    var container = service.element = document.createElement('div');
+    container.style.display = 'none';
+    container.innerHTML = template;
+    document.body.appendChild(container);
+    try {
+        store.dispatch({ type: 'push', payload: kendo_charts_1.chartBaseTheme() });
+        service.setColors();
+    }
+    finally {
+        document.body.removeChild(service.element);
+        delete service.element;
+        done();
+    }
+};
+exports.loadTheme = loadTheme;

package/dist/npm/types/arc-scale.interface.d.ts

@@ -0,0 +1,28 @@
+import { RadialLabels } from './radial-labels.interface';
+import { Scale } from './scale.interface';
+import { LineCap } from './line-cap';
+/**
+ * The scale options of the Gauge.
+ */
+export interface ArcScale extends Scale {
+    /**
+     * Configures the scale labels.
+     */
+    labels?: RadialLabels;
+    /**
+     * The distance between the range indicators and the ticks.
+     */
+    rangeDistance?: number;
+    /**
+     * The `lineCap` style of the ranges.
+     */
+    rangeLineCap?: LineCap;
+    /**
+     * The starting angle of the Gauge. The Gauge is rendered clockwise (0 degrees equal 180 degrees in the polar coordinate system).
+     */
+    startAngle?: number;
+    /**
+     * The ending angle of the Gauge. The Gauge is rendered clockwise (0 degrees equals 180 degrees in the polar coordinate system).
+     */
+    endAngle?: number;
+}

package/dist/npm/types/arc-scale.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length

package/dist/npm/types/border.interface.d.ts

@@ -0,0 +1,18 @@
+import { DashType } from './dash-type.interface';
+/**
+ * The appearance settings for the border lines.
+ */
+export interface Border {
+    /**
+     * The color of the border line. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The dash type of the border line.
+     */
+    dashType?: DashType;
+    /**
+     * The width of the border line in pixels.
+     */
+    width?: number;
+}

package/dist/npm/types/border.interface.js

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

package/dist/npm/types/cap.interface.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The configuration options for the RadialGauge pointer cap.
+ */
+export interface Cap {
+    /**
+     * The color of the cap. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The size of the cap in percent (from 0 to 1).
+     */
+    size?: number;
+}

package/dist/npm/types/cap.interface.js

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

package/dist/npm/types/circular-scale.interface.d.ts

@@ -0,0 +1,10 @@
+import { ArcScale } from './arc-scale.interface';
+/**
+ * The scale options of the Gauge.
+ */
+export interface CircularScale extends ArcScale {
+    /**
+     * @hidden
+     */
+    endAngle?: number;
+}

package/dist/npm/types/circular-scale.interface.js

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

package/dist/npm/types/color-range.interface.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The color range configuration.
+ */
+export interface ColorRange {
+    /**
+     * The color of the range. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The opacity of the range.
+     */
+    opacity?: number;
+    /**
+     * The range start value.
+     */
+    from?: number;
+    /**
+     * The range end value.
+     */
+    to?: number;
+}

package/dist/npm/types/color-range.interface.js

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

package/dist/npm/types/dash-type.interface.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The dash type of a line.
+ */
+export declare type DashType = 'dash' | 'dashDot' | 'dot' | 'longDash' | 'longDashDot' | 'longDashDotDot' | 'solid';

package/dist/npm/types/dash-type.interface.js

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

package/dist/npm/types/gauge-area.interface.d.ts

@@ -0,0 +1,27 @@
+import { Border } from './border.interface';
+import { Margin } from './margin.interface';
+/**
+ * The configuration options for the Gauge area. Represents the entire visible area of the Gauge.
+ */
+export interface GaugeArea {
+    /**
+     * The background of the Gauge area. Accepts valid CSS color strings, including hex and rgb.
+     */
+    background?: string;
+    /**
+     * The border of the Gauge area.
+     */
+    border?: Border;
+    /**
+     * The height of the Gauge area.
+     */
+    height?: number;
+    /**
+     * The margin of the Gauge area.
+     */
+    margin?: number | Margin;
+    /**
+     * The height of the Gauge area.
+     */
+    width?: number;
+}

package/dist/npm/types/gauge-area.interface.js

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

package/dist/npm/types/labels.interface.d.ts

@@ -0,0 +1,47 @@
+import { Border } from './border.interface';
+import { Margin } from './margin.interface';
+import { Padding } from './padding.interface';
+/**
+ * The configuration of the scale labels.
+ */
+export interface Labels {
+    /**
+     * The background of the labels. Accepts valid CSS color strings, including hex and rgb.
+     */
+    background?: string;
+    /**
+     * The border of the labels.
+     */
+    border?: Border;
+    /**
+     * The color of the labels. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The font of the labels.
+     */
+    font?: string;
+    /**
+     * The format that is used to display the labels. Uses the IntlService [`format`]({% slug api_intl_intlservice %}#toc-format) method.
+     */
+    format?: string;
+    /**
+     * The margin of the labels.
+     */
+    margin?: number | Margin;
+    /**
+     * The padding of the labels.
+     */
+    padding?: number | Padding;
+    /**
+     * The function which returns the label content.
+     *
+     * The available fields in the function argument are:
+     * - `value`—The value of the label.
+     */
+    content?: (e: any) => string;
+    /**
+     * The visibility of the labels.
+     */
+    visible?: boolean;
+}

package/dist/npm/types/labels.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length

package/dist/npm/types/line-cap.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The cap style of a line.
+ */
+export declare type LineCap = 'butt' | 'round' | 'square';

package/dist/npm/types/line-cap.js

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

package/dist/npm/types/line.interface.d.ts

@@ -0,0 +1,22 @@
+import { DashType } from './dash-type.interface';
+/**
+ * The scale line options.
+ */
+export interface Line {
+    /**
+     * The color of the lines. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The dash type of the line.
+     */
+    dashType?: DashType;
+    /**
+     * The visibility of the lines.
+     */
+    visible?: boolean;
+    /**
+     * The width of the line.
+     */
+    width?: number;
+}

package/dist/npm/types/line.interface.js

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

package/dist/npm/types/linear-pointer-shape.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The shape of the pointer.
+ */
+export declare type LinearPointerShape = 'barIndicator' | 'arrow';

package/dist/npm/types/linear-pointer-shape.js

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

package/dist/npm/types/linear-pointer.interface.d.ts

@@ -0,0 +1,36 @@
+import { Border } from './border.interface';
+import { Margin } from './margin.interface';
+import { LinearPointerShape } from './linear-pointer-shape';
+/**
+ * The configuration options for the LinearGauge pointer.
+ */
+export interface LinearPointer {
+    /**
+     * The border of the Gauge area.
+     */
+    border?: Border;
+    /**
+     * The color of the pointer. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The margin of the pointer.
+     */
+    margin?: number | Margin;
+    /**
+     * The opacity of the pointer.
+     */
+    opacity?: number;
+    /**
+     * The shape of the pointer.
+     */
+    shape?: LinearPointerShape;
+    /**
+     * The size of the pointer.
+     */
+    size?: number;
+    /**
+     * The value of the pointer.
+     */
+    value?: number;
+}

package/dist/npm/types/linear-pointer.interface.js

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

package/dist/npm/types/linear-scale.interface.d.ts

@@ -0,0 +1,26 @@
+import { Scale } from './scale.interface';
+import { Line } from './line.interface';
+import { Range } from './range.interface';
+/**
+ * The scale options of the Gauge.
+ */
+export interface LinearScale extends Scale {
+    /**
+     * Configures the scale line.
+     */
+    line?: Line;
+    /**
+     * The ranges of the scale.
+     */
+    ranges?: Range[];
+    /**
+     * Mirrors the scale labels and ticks. If the labels are normally on the left side of the scale, the mirroring of the scale will render them to the right.
+     */
+    mirror?: boolean;
+    /**
+     * Specifies if the scale will be vertical ([see example]({% slug orientation_lineargauge %})).
+     *
+     * @default true
+     */
+    vertical?: boolean;
+}

package/dist/npm/types/linear-scale.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length

package/dist/npm/types/margin.interface.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The margin configuration for each side.
+ */
+export interface Margin {
+    /**
+     * The top margin in pixels.
+     */
+    top?: number;
+    /**
+     * The right margin in pixels.
+     */
+    right?: number;
+    /**
+     * The bottom margin in pixels.
+     */
+    bottom?: number;
+    /**
+     * The left margin in pixels.
+     */
+    left?: number;
+}

package/dist/npm/types/margin.interface.js

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

package/dist/npm/types/padding.interface.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The padding configuration for each side.
+ */
+export interface Padding {
+    /**
+     * The top padding in pixels.
+     */
+    top?: number;
+    /**
+     * The right padding in pixels.
+     */
+    right?: number;
+    /**
+     * The bottom padding in pixels.
+     */
+    bottom?: number;
+    /**
+     * The left padding in pixels.
+     */
+    left?: number;
+}

package/dist/npm/types/padding.interface.js

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

package/dist/npm/types/radial-label-position.d.ts

@@ -0,0 +1,4 @@
+/**
+ * The position of the RadialGauge labels.
+ */
+export declare type RadialLabelPosition = 'inside' | 'outside';

package/dist/npm/types/radial-label-position.js

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

package/dist/npm/types/radial-labels.interface.d.ts

@@ -0,0 +1,8 @@
+import { Labels } from './labels.interface';
+import { RadialLabelPosition } from './radial-label-position';
+export interface RadialLabels extends Labels {
+    /**
+     * The position of the labels.
+     */
+    position?: RadialLabelPosition;
+}

package/dist/npm/types/radial-labels.interface.js

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

package/dist/npm/types/radial-pointer.interface.d.ts

@@ -0,0 +1,22 @@
+import { Cap } from './cap.interface';
+/**
+ * The configuration options for the RadialGauge pointer.
+ */
+export interface RadialPointer {
+    /**
+     * The configuration options for the cap.
+     */
+    cap?: Cap;
+    /**
+     * The color of the pointer. Accepts valid CSS color strings, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The pointer length (in percent) that is based on the distance to the scale. The default length of `1` indicates that the pointer exactly reaches the scale. Accepts values between `0.1` and `1.5`.
+     */
+    length?: number;
+    /**
+     * The pointer value.
+     */
+    value?: number;
+}

package/dist/npm/types/radial-pointer.interface.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// tslint:enable:max-line-length