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

package/dist/es/ArcCenter.d.ts

@@ -0,0 +1,48 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+export interface ArcCenterValue {
+    value: number;
+    color: string;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterState {
+    element: HTMLDivElement | null;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterProps {
+    center?: any;
+    arcCenterValue?: object;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterData {
+}
+/**
+ * @hidden
+ */
+export interface ArcCenterAll extends Vue, ArcCenterMethods, ArcCenterData, ArcCenterComputed, ArcCenterState {
+}
+declare let ArcCenter: ComponentOptions<ArcCenterAll, DefaultData<ArcCenterData>, DefaultMethods<ArcCenterAll>, ArcCenterComputed, RecordPropsDefinition<ArcCenterProps>>;
+declare const ArcCenterVue3: DefineComponent<ArcCenterProps, any, ArcCenterData, ArcCenterComputed, ArcCenterMethods, {}, {}, {}, string, ArcCenterProps, ArcCenterProps, {}>;
+export { ArcCenter, ArcCenterVue3 };

package/dist/es/ArcCenter.js

@@ -0,0 +1,53 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { getTemplate } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+
+var ArcCenter = {
+  name: 'KendoArcCenter',
+  props: {
+    center: [String, Function, Object],
+    arcCenterValue: Object
+  },
+  created: function created() {
+    this.element = null;
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var center = this.$props.center;
+    var divStyle = {
+      zIndex: -1
+    };
+    var renderer = null;
+
+    if (center) {
+      var centerDefaultRendering = '';
+      renderer = getTemplate.call(this, {
+        h: h,
+        template: center,
+        defaultRendering: centerDefaultRendering,
+        additionalProps: {
+          value: this.arcCenterValue.value,
+          color: this.arcCenterValue.color
+        }
+      });
+      return h("div", {
+        "class": "k-arcgauge-label",
+        style: divStyle
+      }, [renderer]);
+    }
+
+    return renderer;
+  }
+};
+var ArcCenterVue3 = ArcCenter;
+export { ArcCenter, ArcCenterVue3 };

package/dist/es/ArcGauge.d.ts

@@ -0,0 +1,43 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { ArcGaugeProps } from './ArcGaugeProps';
+export interface ArcCenterStyle {
+    left: string;
+    top: string;
+}
+/**
+ * @hidden
+ */
+export interface ArcGaugeState {
+    baseGauge: any;
+    gaugeType: any;
+}
+/**
+ * @hidden
+ */
+export interface ArcGaugeComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ArcGaugeMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface ArcGaugeData {
+}
+/**
+ * @hidden
+ */
+export interface ArcGaugeAll extends Vue, ArcGaugeMethods, ArcGaugeData, ArcGaugeComputed, ArcGaugeState {
+}
+declare let ArcGauge: ComponentOptions<ArcGaugeAll, DefaultData<ArcGaugeData>, DefaultMethods<ArcGaugeAll>, ArcGaugeComputed, RecordPropsDefinition<ArcGaugeProps>>;
+declare const ArcGaugeVue3: DefineComponent<ArcGaugeProps, any, ArcGaugeData, ArcGaugeComputed, ArcGaugeMethods, {}, {}, {}, string, ArcGaugeProps, ArcGaugeProps, {}>;
+export { ArcGauge, ArcGaugeVue3 };

package/dist/es/ArcGauge.js

@@ -0,0 +1,196 @@
+// @ts-ignore
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { BaseGauge } from './BaseGauge';
+import { ArcGauge as KendoArcGauge } from '@progress/kendo-charts';
+import { ArcCenter } from './ArcCenter';
+import { Group, drawDOM } from '@progress/kendo-drawing';
+import { classNames, getDefaultSlots, templateRendering, getListeners } from '@progress/kendo-vue-common'; // tslint:enable:max-line-length
+
+var ArcGauge = {
+  name: 'KendoArcGauge',
+  props: {
+    dir: String,
+    renderAs: {
+      type: String,
+      default: 'svg',
+      validator: function validator(value) {
+        return ['svg', 'canvas'].includes(value);
+      }
+    },
+    gaugeConstructor: [Object, Function],
+    value: {
+      type: Number,
+      default: undefined
+    },
+    color: String,
+    colors: {
+      type: Array,
+      default: undefined
+    },
+    opacity: {
+      type: Number,
+      default: undefined
+    },
+    scale: {
+      type: Object,
+      default: undefined
+    },
+    centerRender: [String, Function, Object]
+  },
+  created: function created() {
+    this.gaugeType = KendoArcGauge;
+  },
+  data: function data() {
+    return {
+      centerStyles: {},
+      arcCenterValue: {}
+    };
+  },
+  mounted: function mounted() {
+    this._baseGauge = this.v3 ? this.baseGaugeRef : this.$refs.baseGauge;
+    this.center = this.v3 ? this.centerRef : this.$refs.center;
+    this.positionCenter();
+  },
+  watch: {
+    colors: function colors(_newColors, oldColors) {
+      this.prevColors = oldColors;
+    }
+  },
+  updated: function updated() {
+    this._baseGauge = this.v3 ? this.baseGaugeRef : this.$refs.baseGauge;
+    this.center = this.v3 ? this.centerRef : this.$refs.center;
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var _this2 = this;
+
+    var _this = this;
+
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var _a = this.$props,
+        centerRender = _a.centerRender,
+        className = _a.className,
+        value = _a.value,
+        color = _a.color;
+    var center = centerRender ? templateRendering.call(this, centerRender, getListeners.call(this)) : undefined;
+    return (// @ts-ignore  function children
+      h(BaseGauge, {
+        value: value,
+        attrs: this.v3 ? undefined : {
+          value: value,
+          color: color,
+          deriveOptionsFromParent: this.deriveOptionsFromParent,
+          gaugeConstructor: this.gaugeType,
+          getTarget: this.getTarget
+        },
+        color: color,
+        deriveOptionsFromParent: this.deriveOptionsFromParent,
+        ref: this.v3 ? function (el) {
+          _this.baseGaugeRef = el;
+        } : 'baseGauge',
+        gaugeConstructor: this.gaugeType,
+        getTarget: this.getTarget,
+        "class": classNames('k-gauge k-arcgauge', className)
+      }, this.v3 ? function () {
+        return [defaultSlots, // @ts-ignore
+        h(ArcCenter, {
+          center: center,
+          attrs: _this2.v3 ? undefined : {
+            center: center,
+            arcCenterValue: _this2.arcCenterValue
+          },
+          style: _this2.centerStyles,
+          arcCenterValue: _this2.arcCenterValue,
+          ref: _this2.v3 ? function (el) {
+            _this.centerRef = el;
+          } : 'center'
+        })];
+      } : [defaultSlots, h(ArcCenter, {
+        center: center,
+        attrs: _this2.v3 ? undefined : {
+          center: center,
+          arcCenterValue: _this2.arcCenterValue
+        },
+        style: _this2.centerStyles,
+        arcCenterValue: _this2.arcCenterValue,
+        ref: _this2.v3 ? function (el) {
+          _this.centerRef = el;
+        } : 'center'
+      })])
+    );
+  },
+  methods: {
+    positionCenter: function positionCenter() {
+      var width = this.center.$el.offsetWidth;
+      var height = this.center.$el.offsetHeight;
+      var gaugeInstance = this.gaugeInstance();
+      var position = gaugeInstance.centerLabelPosition(width, height);
+      this.centerStyles = {
+        left: position.left + 'px',
+        top: position.top + 'px'
+      };
+      this.arcCenterValue = {
+        value: gaugeInstance.value(),
+        color: gaugeInstance.currentColor()
+      };
+    },
+    gaugeInstance: function gaugeInstance() {
+      if (this._baseGauge) {
+        return this._baseGauge.gaugeInstance;
+      }
+
+      return null;
+    },
+    surface: function surface() {
+      if (this._baseGauge) {
+        return this._baseGauge.surface;
+      }
+
+      return null;
+    },
+    element: function element() {
+      if (this._baseGauge) {
+        return this._baseGauge.element;
+      }
+
+      return null;
+    },
+    exportVisual: function exportVisual(options) {
+      if (this.gaugeInstance !== null && this.element) {
+        return drawDOM(this.element, options);
+      }
+
+      return Promise.resolve(new Group());
+    },
+    getTarget: function getTarget() {
+      return this;
+    },
+    deriveOptionsFromParent: function deriveOptionsFromParent(options) {
+      var _a = this.$props,
+          value = _a.value,
+          color = _a.color,
+          colors = _a.colors,
+          opacity = _a.opacity,
+          scale = _a.scale;
+      return Object.assign({}, options, {
+        value: value,
+        color: color,
+        colors: colors,
+        opacity: opacity,
+        scale: scale
+      });
+    }
+  }
+};
+var ArcGaugeVue3 = ArcGauge;
+export { ArcGauge, ArcGaugeVue3 };

package/dist/es/ArcGaugeProps.d.ts

@@ -0,0 +1,33 @@
+import { BaseGaugeProps } from './BaseGaugeProps';
+import { ArcScale, ColorRange } from './types';
+/**
+ * Represents the props of the [KendoReact ArcGauge component]({% slug overview_arcgauge_gauges %}).
+ */
+export interface ArcGaugeProps extends BaseGaugeProps {
+    /**
+     * The value of the Gauge.
+     */
+    value: number;
+    /**
+     * The color of the value pointer. Accepts a valid CSS color string, including hex and rgb.
+     */
+    color?: string;
+    /**
+     * The color ranges of the value pointer
+     * ([see example]({% slug colorranges_arcgauge %})).
+     */
+    colors?: ColorRange[];
+    /**
+     * The opacity of the value pointer.
+     */
+    opacity?: number;
+    /**
+     * The scale options of the ArcGauge.
+     */
+    scale?: ArcScale;
+    /**
+     *
+     * A function that renders the center template of the Gauge.
+     */
+    centerRender?: any;
+}

package/dist/es/BaseGauge.d.ts

@@ -0,0 +1,42 @@
+import { DefineComponent } from './additionalTypes';
+import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
+declare type DefaultData<V> = object | ((this: V) => {});
+declare type DefaultMethods<V> = {
+    [key: string]: (this: V, ...args: any[]) => any;
+};
+import { Surface } from '@progress/kendo-drawing';
+import { BaseGaugeProps } from './BaseGaugeProps';
+/**
+ * @hidden
+ */
+export interface BaseGaugeState {
+    gaugeInstance: any | null;
+    surface: Surface;
+    element: HTMLDivElement | null;
+    themeStore: any;
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeMethods {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeData {
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeAll extends Vue, BaseGaugeMethods, BaseGaugeData, BaseGaugeComputed, BaseGaugeState {
+}
+declare let BaseGauge: ComponentOptions<BaseGaugeAll, DefaultData<BaseGaugeData>, DefaultMethods<BaseGaugeAll>, BaseGaugeComputed, RecordPropsDefinition<BaseGaugeProps>>;
+declare const BaseGaugeVue3: DefineComponent<BaseGaugeProps, any, BaseGaugeData, BaseGaugeComputed, BaseGaugeMethods, {}, {}, {}, string, BaseGaugeProps, BaseGaugeProps, {}>;
+export { BaseGauge, BaseGaugeVue3 };

package/dist/es/BaseGauge.js

@@ -0,0 +1,222 @@
+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;
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { loadTheme } from './theming/theme-service';
+import createStore from './store/store';
+import { themeReducer, observersReducer } from './store/reducer';
+import { canUseDOM } from '@progress/kendo-vue-common'; // import { GaugeContextType, GaugeContext } from './GaugeContext';
+
+import { validatePackage, getDefaultSlots } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata'; // tslint:enable:max-line-length
+
+var BaseGauge = {
+  name: 'KendoBaseGauge',
+  props: {
+    dir: String,
+    renderAs: {
+      type: String,
+      default: 'svg',
+      validator: function validator(value) {
+        return ['svg', 'canvas'].includes(value);
+      }
+    },
+    value: Number,
+    gaugeConstructor: [Object, Function],
+    deriveOptionsFromParent: Function
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.gaugeInstance = null;
+    this.themeStore = {};
+    this._prevRenderAs = undefined;
+    this._prevDir = undefined; // protected themeUnsubscriber: Function = Function.prototype;
+    // protected contextValue: GaugeContextType;
+    // protected observersStore: any = {};
+
+    this.themeStore = createStore(themeReducer);
+    this.observersStore = createStore(observersReducer);
+    this.contextValue = {
+      observersStore: this.observersStore
+    };
+  },
+  mounted: function mounted() {
+    loadTheme(this.themeStore, this.instantiateCoreGauge.bind(this));
+    this.themeUnsubscriber = this.themeStore.subscribe(this.refresh.bind(this));
+    window.addEventListener('resize', this.onWindowResize);
+    this.trigger('render', {
+      sender: this
+    });
+  },
+  watch: {
+    dir: function dir(_newDir, oldDir) {
+      this._prevDir = oldDir;
+    },
+    renderAs: function renderAs(_newRenderAs, oldRenderAs) {
+      this._prevRenderAs = oldRenderAs;
+    }
+  },
+  updated: function updated() {
+    var _a = this.$props,
+        dir = _a.dir,
+        children = _a.children,
+        deriveOptionsFromParent = _a.deriveOptionsFromParent,
+        getTarget = _a.getTarget,
+        gaugeConstructor = _a.gaugeConstructor,
+        className = _a.className,
+        renderAs = _a.renderAs,
+        currentOthers = __rest(_a, ["dir", "children", "deriveOptionsFromParent", "getTarget", "gaugeConstructor", "className", "renderAs"]);
+
+    if (this.gaugeInstance !== null) {
+      var currentIntlService = provideIntlService(this);
+      var gaugeService = this.gaugeInstance.contextService;
+      var localeChanged = currentIntlService.locale !== gaugeService._intlService.locale;
+      var optionsChanged = true;
+      var typedCurrentOthers = currentOthers;
+
+      if (localeChanged) {
+        this.gaugeInstance.contextService._intlService = currentIntlService;
+        this.gaugeInstance.contextService.format._intlService = currentIntlService;
+
+        if (!optionsChanged) {
+          this.gaugeInstance.noTransitionsRedraw();
+        }
+      }
+
+      if (optionsChanged || (renderAs || 'svg') !== (this._prevRenderAs || 'svg')) {
+        this.refresh();
+      } else {
+        if (Object.keys(currentOthers).indexOf('pointer') > -1) {
+          var isPointerArray = Array.isArray(typedCurrentOthers.pointer);
+
+          if (isPointerArray) {
+            this.refreshAllValues(typedCurrentOthers.pointer.map(function (item) {
+              return item.value;
+            }));
+          } else {
+            this.refreshValue((typedCurrentOthers.pointer || {}).value);
+          }
+        } else {
+          this.refreshValue(typedCurrentOthers.value);
+        }
+      }
+
+      if (this._prevDir !== dir) {
+        this.gaugeInstance.setDirection(this.getDirection(dir));
+      } //  this.$emit('render', { sender: this });
+
+    }
+  },
+  destroyed: function destroyed() {
+    this.themeUnsubscriber();
+
+    if (this.gaugeInstance !== null) {
+      this.gaugeInstance.destroy();
+      this.gaugeInstance = null;
+    }
+
+    window.removeEventListener('resize', this.onWindowResize);
+  },
+  // @ts-ignore
+  setup: !gh ? undefined : function () {
+    var v3 = !!gh;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var gaugeStyles = Object.assign({}, {
+      position: 'relative'
+    });
+    return h("div", {
+      style: gaugeStyles
+    }, [defaultSlots]);
+  },
+  methods: {
+    instantiateCoreGauge: function instantiateCoreGauge() {
+      var _a = this.$props,
+          dir = _a.dir,
+          gaugeConstructor = _a.gaugeConstructor;
+      var gaugeOptions = this.getGaugeOptions();
+      this.gaugeInstance = new gaugeConstructor(this.$el, gaugeOptions, this.themeStore.getState(), {
+        rtl: this.getDirection(dir),
+        intlService: provideIntlService(this),
+        sender: this
+      });
+    },
+    refresh: function refresh() {
+      if (this.gaugeInstance !== null) {
+        var themeOptions = this.themeStore.getState();
+        var gaugeOptions = this.getGaugeOptions();
+        this.gaugeInstance.setOptions(gaugeOptions, themeOptions);
+      }
+    },
+    refreshValue: function refreshValue(value) {
+      this.gaugeInstance.value(value);
+    },
+    refreshAllValues: function refreshAllValues(values) {
+      this.gaugeInstance.allValues(values);
+    },
+    getDirection: function getDirection(dir) {
+      var _this = this;
+
+      var directionFromWindow = function directionFromWindow() {
+        return canUseDOM && window.getComputedStyle(_this.$el).direction;
+      };
+
+      var direction = dir !== undefined ? dir : directionFromWindow() || 'ltr';
+      return direction === 'rtl';
+    },
+    getGaugeOptions: function getGaugeOptions() {
+      var _a = this.$props,
+          renderAs = _a.renderAs,
+          transitions = _a.transitions,
+          deriveOptionsFromParent = _a.deriveOptionsFromParent;
+      var gaugeOptions = Object.assign({
+        renderAs: renderAs,
+        transitions: transitions
+      });
+
+      if (deriveOptionsFromParent) {
+        // Add options from parent - required by TS
+        gaugeOptions = deriveOptionsFromParent(gaugeOptions);
+      }
+
+      return gaugeOptions;
+    },
+    trigger: function trigger(name, e) {
+      var observers = this.observersStore.getState();
+
+      for (var idx = 0; idx < observers.length; idx++) {
+        observers[idx].trigger(name, e);
+      }
+    },
+    onWindowResize: function onWindowResize() {
+      if (this.gaugeInstance !== null) {
+        this.gaugeInstance.resize();
+        this.trigger('render', {
+          sender: this
+        });
+      }
+    }
+  }
+};
+var BaseGaugeVue3 = BaseGauge;
+export { BaseGauge, BaseGaugeVue3 };

package/dist/es/BaseGaugeProps.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @hidden
+ */
+export interface BaseGaugePrivateProps {
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent?: (options: any) => any;
+    /**
+     * @hidden
+     */
+    gaugeConstructor?: object;
+    /**
+     * @hidden
+     */
+    getTarget?: () => any;
+}
+/**
+ * @hidden
+ */
+export interface BaseGaugeProps extends BaseGaugePrivateProps {
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    value?: number;
+    color?: any;
+    colors?: any[];
+    opacity?: any;
+    /**
+     * Sets the preferred rendering engine. If not supported by the browser, the Gauge switches to the first available mode.
+     *
+     * The supported values are:
+     * - `"svg"`—If available, renders the component as an inline `.svg` file.
+     * - `"canvas"`—If available, renders the component as a `canvas` element.
+     */
+    renderAs?: 'svg' | 'canvas' | string;
+    /**
+     * If set to `true`, the Gauge plays animations when it displays the series. By default, animations are enabled.
+     */
+    transitions?: boolean;
+}

package/dist/es/BaseGaugeProps.js

@@ -0,0 +1 @@
+// tslint:enable:max-line-length