@progress/kendo-vue-charts 3.5.0 → 3.5.1-dev.202208150613

package/dist/esm/BaseChart.js

@@ -0,0 +1,501 @@
+var __assign = this && this.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign.apply(this, arguments);
+}; // @ts-ignore
+
+
+import * as Vue from 'vue';
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+import { provideIntlService } from '@progress/kendo-vue-intl';
+import { DomEventsBuilder as ChartDomEventsBuilder, InstanceObserver } from '@progress/kendo-charts';
+import { getDefaultSlots, hasListener, isRtl, setRef, getRef } from '@progress/kendo-vue-common';
+import { hasParent } from './utils/main.js';
+import { DomEventsBuilder } from './events/dom-events-builder.js';
+import { create as createEvent } from './events/chart-event-builder.js';
+import { toDomEvent } from './events/dom-event.js';
+import { loadTheme } from './theming/theme-service.js';
+import createStore from './store/store.js';
+import { optionsReducer, themeReducer, observersReducer } from './store/reducer.js';
+import { toggle } from './utils/main.js';
+import './defaults.js';
+import { SeriesTooltip } from './tooltip/Series.js';
+import { CrosshairContainer } from './tooltip/CrosshairContainer.js';
+import { validatePackage } from '@progress/kendo-vue-common';
+import { packageMetadata } from './package-metadata.js';
+/**
+ * @hidden
+ */
+
+var BaseChartVue2 = {
+  name: 'KendoBaseChart',
+  props: {
+    deriveOptionsFromParent: {
+      type: Function,
+      default: undefined
+    },
+    chartConstructor: {
+      type: [Object, Function],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    className: String,
+    chartStyle: Object,
+    wrapper: String,
+    getTarget: {
+      type: Function,
+      default: undefined
+    },
+    dataItems: {
+      type: Array,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    dir: String,
+    renderAs: {
+      type: String,
+      default: undefined,
+      validator: function validator(value) {
+        return ['svg', 'canvas'].includes(value);
+      }
+    },
+    pannable: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    zoomable: {
+      type: [Boolean, Object],
+      default: function _default() {
+        return undefined;
+      }
+    },
+    seriesColors: {
+      type: Array,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    transitions: {
+      type: Boolean,
+      default: true
+    },
+    paneDefaults: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    panes: {
+      type: Array,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    seriesDefaults: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    axisDefaults: {
+      type: Object,
+      default: function _default() {
+        return undefined;
+      }
+    },
+    allListeners: {
+      type: Object,
+      default: undefined
+    }
+  },
+  inject: {
+    kendoIntlService: {
+      default: null
+    }
+  },
+  provide: function provide() {
+    return {
+      optionsState: this.optionsState,
+      dispatchOptions: this.dispatchOptions,
+      observersState: this.observersState,
+      dispatchObservers: this.dispatchObservers,
+      childrenObserver: this.childrenObserver,
+      chartRefresh: this.refresh
+    };
+  },
+  created: function created() {
+    this.chartInstance = null;
+    this.element = null;
+    this.suppressTransitions = false;
+    validatePackage(packageMetadata);
+    this.themeStore = createStore(themeReducer);
+    this.chartObserver = new InstanceObserver(this, {
+      render: 'onRender',
+      legendItemClick: 'onLegendItemClick'
+    });
+  },
+  data: function data() {
+    return {
+      optionsState: {},
+      observersState: [],
+      childrenObserver: new InstanceObserver(this, {
+        onMouseLeave: 'onChildMouseLeave'
+      })
+    };
+  },
+  mounted: function mounted() {
+    this.element = getRef(this, 'element');
+    loadTheme(this.themeStore, this.instantiateCoreChart);
+    window.addEventListener('resize', this.onWindowResize);
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.onDestroyed();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.onDestroyed();
+  },
+  updated: function updated() {
+    // const { dir, children, ...spreadProps } = this.$props;
+    if (this.chartInstance !== null) {
+      var currentIntlService = provideIntlService(this);
+      var chartService = this.chartInstance.chartService;
+      var localeChanged = currentIntlService.locale !== chartService._intlService.locale; // const shouldUpdate = (Object as any).entries(prevProps)
+      //     .filter((keyValue) => (keyValue[0] !== 'dir' && keyValue[0] !== 'children'))
+      //     .some((keyValue) => {
+      //         const [key, value] = keyValue;
+      //         return !(spreadProps.hasOwnProperty(key) && spreadProps[key] === value);
+      //     });
+
+      if (localeChanged) {
+        this.chartInstance.chartService._intlService = currentIntlService;
+        this.chartInstance.chartService.format._intlService = currentIntlService; // if (!shouldUpdate) {
+
+        this.chartInstance.noTransitionsRedraw(); // }
+      } //     if (shouldUpdate) {
+
+
+      this.refresh(); //     }
+      //     if (prevProps.dir !== dir) {
+      //         this.chartInstance.setDirection(this.getDirection(dir));
+      //     }
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var defaultSlots = getDefaultSlots(this);
+    var _a = this.$props,
+        _b = _a.chartStyle,
+        chartStyle = _b === void 0 ? {} : _b,
+        className = _a.className,
+        wrapper = _a.wrapper;
+    var chartStyles = Object.assign({}, chartStyle, {
+      position: 'relative'
+    });
+
+    var divContent = function divContent() {
+      return h("div", {
+        onMouseleave: this.onChartMouseLeave,
+        on: this.v3 ? undefined : {
+          "mouseleave": this.onChartMouseLeave
+        },
+        ref: setRef(this, 'element'),
+        "class": "k-chart-surface"
+      }, [defaultSlots]);
+    };
+
+    return h(wrapper, {
+      style: chartStyles,
+      class: className,
+      key: 'chartElement'
+    }, [h(SeriesTooltip, {
+      key: 'seriesTooltip'
+    }), h(CrosshairContainer, {
+      key: 'crosshairTooltips',
+      optionsState: __assign({}, this.optionsState),
+      attrs: this.v3 ? undefined : {
+        optionsState: __assign({}, this.optionsState)
+      }
+    }), divContent.call(this)]);
+  },
+  methods: {
+    dispatchOptions: function dispatchOptions(action) {
+      optionsReducer(this.optionsState, action);
+    },
+    dispatchObservers: function dispatchObservers(action) {
+      this.observersState = observersReducer(this.observersState, action);
+    },
+    onDestroyed: function onDestroyed() {
+      if (this.chartInstance !== null) {
+        this.chartInstance.destroy();
+        this.chartInstance = null;
+      }
+
+      window.removeEventListener('resize', this.onWindowResize);
+    },
+    getDirection: function getDirection(dir) {
+      return dir !== undefined ? dir === 'rtl' : isRtl(this.element);
+    },
+    getChartOptions: function getChartOptions() {
+      var _a = this.$props,
+          renderAs = _a.renderAs,
+          pannable = _a.pannable,
+          zoomable = _a.zoomable,
+          paneDefaults = _a.paneDefaults,
+          panes = _a.panes,
+          transitions = _a.transitions,
+          seriesColors = _a.seriesColors,
+          seriesDefaults = _a.seriesDefaults,
+          axisDefaults = _a.axisDefaults,
+          deriveOptionsFromParent = _a.deriveOptionsFromParent;
+      var chartOptions = {}; // undefined clears chart defaults which leads to several issues
+
+      if (renderAs !== undefined) {
+        chartOptions.renderAs = renderAs;
+      }
+
+      if (pannable !== undefined) {
+        chartOptions.pannable = pannable;
+      }
+
+      if (zoomable !== undefined) {
+        chartOptions.zoomable = zoomable;
+      }
+
+      if (paneDefaults !== undefined) {
+        chartOptions.paneDefaults = paneDefaults;
+      }
+
+      if (panes !== undefined) {
+        chartOptions.panes = panes;
+      }
+
+      if (transitions !== undefined) {
+        chartOptions.transitions = transitions;
+      }
+
+      if (seriesColors !== undefined) {
+        chartOptions.seriesColors = seriesColors;
+      }
+
+      if (seriesDefaults !== undefined) {
+        chartOptions.seriesDefaults = seriesDefaults;
+      }
+
+      if (axisDefaults !== undefined) {
+        chartOptions.axisDefaults = axisDefaults;
+      }
+
+      chartOptions = Object.assign(chartOptions, this.optionsState);
+
+      if (deriveOptionsFromParent) {
+        chartOptions = deriveOptionsFromParent(chartOptions);
+      }
+
+      return chartOptions;
+    },
+    refresh: function refresh() {
+      if (this.chartInstance !== null) {
+        var themeOptions = this.themeStore.getState();
+        var chartOptions = this.getChartOptions();
+        var transitions = chartOptions.transitions;
+
+        if (this.suppressTransitions) {
+          chartOptions.transitions = false;
+        }
+
+        if (hasListener.call(this, 'refresh')) {
+          this.trigger('refresh', {
+            chartOptions: chartOptions,
+            themeOptions: themeOptions,
+            chartInstance: this.chartInstance
+          });
+        } else {
+          this.chartInstance.setOptions(chartOptions, themeOptions);
+        }
+
+        if (this.suppressTransitions) {
+          chartOptions.transitions = transitions;
+          this.suppressTransitions = false;
+        }
+      }
+    },
+    instantiateCoreChart: function instantiateCoreChart() {
+      var _a = this.$props,
+          dir = _a.dir,
+          chartConstructor = _a.chartConstructor;
+      var chartOptions = this.getChartOptions();
+      var temp = null;
+
+      if (this.element) {
+        temp = this.element.lastElementChild;
+
+        if (temp) {
+          this.element.removeChild(temp);
+        }
+      }
+
+      this.chartInstance = new chartConstructor(this.element, chartOptions, this.themeStore.getState(), {
+        rtl: this.getDirection(dir),
+        intlService: provideIntlService(this),
+        observer: this.chartObserver,
+        sender: this
+      });
+
+      if (this.element && temp) {
+        this.element.appendChild(temp);
+      }
+    },
+    trigger: function trigger(name, e) {
+      var target = this.$props.getTarget();
+      var eventObject = createEvent(name, e, target);
+      var observers = this.observersState;
+      var isDefaultPrevented = false;
+
+      for (var idx = 0; idx < observers.length; idx++) {
+        if (observers[idx].trigger(name, e)) {
+          isDefaultPrevented = true;
+        }
+      }
+      /* We have not prevented the event internally, now pass it to the user */
+
+
+      if (isDefaultPrevented === false && eventObject) {
+        this.$emit('basechartevent', name.toLowerCase(), eventObject);
+        return eventObject.isDefaultPrevented && eventObject.isDefaultPrevented();
+      }
+
+      return isDefaultPrevented;
+    },
+    triggerDomEvent: function triggerDomEvent(name, e) {
+      var observers = this.observersState;
+      var isDefaultPrevented = false;
+
+      for (var idx = 0; idx < observers.length; idx++) {
+        if (observers[idx].trigger(name, e)) {
+          isDefaultPrevented = true;
+        }
+      }
+
+      return isDefaultPrevented;
+    },
+    onRender: function onRender(e) {
+      if (this.chartInstance !== null) {
+        this.surface = e.sender.surface;
+        this.trigger('render', e);
+      }
+    },
+    hasListener: function hasListener(name) {
+      if (!this.$props.allListeners) {
+        return false;
+      }
+
+      return Object.keys(this.$props.allListeners).some(function (item) {
+        return item.toLowerCase().indexOf(name.toLowerCase()) !== -1;
+      });
+    },
+    onLegendItemClick: function onLegendItemClick(e) {
+      if (this.chartInstance !== null) {
+        /**
+         * In "controlled" state the user should toggle the series data visibility
+         */
+        if (this.hasListener('legendItemClick')) {
+          this.trigger('legendItemClick', e);
+        } else {
+          var series = this.optionsState.series;
+
+          if (!series) {
+            return;
+          }
+
+          var payload = {};
+          var seriesIndex = e.seriesIndex,
+              pointIndex = e.pointIndex;
+          var seriesByIndex = series[seriesIndex];
+
+          if (pointIndex === undefined) {
+            payload = Object.assign({}, seriesByIndex, {
+              visible: toggle(seriesByIndex.visible)
+            });
+          } else {
+            var pv = seriesByIndex.pointVisibility = seriesByIndex.pointVisibility || [];
+            pv[pointIndex] = toggle(pv[pointIndex]);
+            payload = Object.assign({}, seriesByIndex);
+          }
+
+          this.dispatchOptions({
+            chartCollectionIdxKey: "series_".concat(seriesIndex),
+            payload: payload
+          });
+          this.suppressTransitions = true;
+          this.refresh();
+        }
+      }
+    },
+    onWindowResize: function onWindowResize() {
+      if (this.chartInstance !== null) {
+        this.chartInstance.resize();
+      }
+    },
+    onChartMouseLeave: function onChartMouseLeave(e) {
+      var domEvent = toDomEvent(this, e);
+      var isDefaultPrevented = this.triggerDomEvent('onMouseLeave', domEvent);
+
+      if (isDefaultPrevented) {
+        e.preventDefault();
+      } else if (this.chartInstance !== null) {
+        this.chartInstance.hideElements();
+      }
+    },
+    onChildMouseLeave: function onChildMouseLeave(e) {
+      var event = e.event;
+
+      if (this.chartInstance && !hasParent(event.relatedTarget, this.element)) {
+        this.chartInstance.hideElements();
+      }
+
+      return false;
+    },
+    requiresHandlers: function requiresHandlers(names) {
+      for (var idx = 0; idx < names.length; idx++) {
+        var name_1 = names[idx];
+
+        if (this.hasListener(name_1)) {
+          return true;
+        }
+      }
+
+      return false;
+    }
+  }
+};
+/**
+ * @hidden
+ */
+
+var BaseChart = BaseChartVue2;
+export { BaseChart, BaseChartVue2 };
+ChartDomEventsBuilder.register(DomEventsBuilder);

package/dist/esm/BaseChartProps.d.ts

@@ -0,0 +1,183 @@
+import { AxisLabelClickEvent, DragEvent, DragStartEvent, DragEndEvent, LegendItemClickEvent, LegendItemHoverEvent, NoteClickEvent, NoteHoverEvent, PlotAreaClickEvent, PlotAreaHoverEvent, RenderEvent, SeriesClickEvent, SeriesHoverEvent, ZoomEvent, ZoomStartEvent, ZoomEndEvent, SelectEvent, SelectStartEvent, SelectEndEvent } from './common/events';
+import { AxisDefaults, DragAction, Pane, PaneDefaults, SeriesDefaults, Zoomable } from './common/property-types';
+import { Charts } from './common/charts';
+/**
+ * @hidden
+ */
+export interface BaseChartPrivateProps extends BaseChartProps {
+    /**
+     * @hidden
+     */
+    deriveOptionsFromParent?: (options: any) => any;
+    /**
+     * @hidden
+     */
+    chartConstructor: any;
+    /**
+     * @hidden
+     */
+    className: string;
+    /**
+     * @hidden
+     */
+    chartStyle: object;
+    /**
+     * @hidden
+     */
+    wrapper: string;
+    /**
+     * @hidden
+     */
+    getTarget: () => Charts;
+    /**
+     * @hidden
+     */
+    onRefresh?: (chartOptions: any, themeOptions: any, chartInstance: any) => void;
+    /**
+     * @hidden
+     */
+    dataItems?: any;
+}
+/**
+ * @hidden
+ */
+export interface BaseChartProps {
+    /**
+     * Represents the `dir` HTML attribute.
+     */
+    dir?: string;
+    /**
+     * Sets the preferred rendering engine ([see example]({% slug rendering_chart_charts %})). If not supported by the browser, the Chart 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?: String;
+    /**
+     * Specifies if the Chart can be panned ([see example]({% slug panzoom_chart_charts %})).
+     */
+    pannable?: boolean | DragAction;
+    /**
+     * Specifies if the Chart can be zoomed ([see example]({% slug panzoom_chart_charts %})).
+     */
+    zoomable?: boolean | Zoomable;
+    /**
+     * The default colors for the Chart series. When all colors are used, new colors are pulled from the start again.
+     */
+    seriesColors?: string[];
+    /**
+     * If set to `true`, the Chart plays animations when it displays the series. By default, animations are enabled.
+     */
+    transitions?: boolean;
+    /**
+     * This option allows to override the default pane options.
+     */
+    paneDefaults?: PaneDefaults;
+    /**
+     * The chart panes configuration.
+     */
+    panes?: Pane[];
+    /**
+     * This option allows to override the default series options.
+     */
+    seriesDefaults?: SeriesDefaults;
+    /**
+     * This option allows to override the default axis options.
+     */
+    axisDefaults?: AxisDefaults;
+    /**
+     * @hidden
+     */
+    allListeners?: object;
+    /**
+     * Fires when the user clicks an axis label.
+     */
+    onAxislabelclick?: (event: AxisLabelClickEvent) => void;
+    /**
+     * Fires as long as the user is dragging the Chart with the mouse or through swipe gestures.
+     */
+    onDrag?: (event: DragEvent) => void;
+    /**
+     * Fires when the user stops dragging the Chart.
+     */
+    onDragend?: (event: DragEndEvent) => void;
+    /**
+     * Fires when the user starts dragging the Chart.
+     */
+    onDragstart?: (event: DragStartEvent) => void;
+    /**
+     * Fires when the user hovers over a legend item.
+     */
+    onLegenditemhover?: (event: LegendItemHoverEvent) => void;
+    /**
+     * Fires when the user clicks a legend item ([see example]({% slug legend_chart_charts %}#toc-clicking-legend-items)).
+     */
+    onLegenditemclick?: (event: LegendItemClickEvent) => void;
+    /**
+     * Fires when the user clicks a note.
+     */
+    onNoteclick?: (event: NoteClickEvent) => void;
+    /**
+     * Fires when the user hovers over a note.
+     */
+    onNotehover?: (event: NoteHoverEvent) => void;
+    /**
+     * Fires when the user clicks the plot area. The `click` event is triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    onPlotareaclick?: (event: PlotAreaClickEvent) => void;
+    /**
+     * Fires when the user hovers the plot area ([see example]({% slug crosshairs_chart_charts %}#toc-current-cursotr-value)).
+     */
+    onPlotareahover?: (event: PlotAreaHoverEvent) => void;
+    /**
+     * Fires when the Chart is ready to render on screen ([see example]({% slug plotbands_chart_charts %}#toc-custom-plot-bands)). For example, you can use it to remove loading indicators. Any changes made to the options are ignored.
+     */
+    onRender?: (event: RenderEvent) => void;
+    /**
+     * Fires when the user modifies the selection.
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelect?: (event: SelectEvent) => void;
+    /**
+     * Fires when the user completes the modification of the selection ([see example]({% slug selection_chart_charts %}#toc-using-selection-as-navigator)).
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelectend?: (event: SelectEndEvent) => void;
+    /**
+     * Fires when the user starts modifying the axis selection.
+     *
+     * The range units are:
+     * - Generic axis—Category index (0-based).
+     * - Date axis—Date instance.
+     */
+    onSelectstart?: (event: SelectStartEvent) => void;
+    /**
+     * Fires when the user clicks the Chart series.
+     *
+     * The `click` event will be triggered by the `tap` and `contextmenu` events. To distinguish between the original events, inspect the `e.originalEvent.type` field.
+     */
+    onSeriesclick?: (event: SeriesClickEvent) => void;
+    /**
+     * Fires when the user hovers over the Chart series.
+     */
+    onSerieshover?: (event: SeriesHoverEvent) => void;
+    /**
+     * Fires as long as the user is zooming the Chart by using the mousewheel operation.
+     */
+    onZoom?: (event: ZoomEvent) => void;
+    /**
+     * Fires when the user stops zooming the Chart.
+     */
+    onZoomend?: (event: ZoomEndEvent) => void;
+    /**
+     * Fires when the user uses the mousewheel to zoom the Chart.
+     */
+    onZoomstart?: (event: ZoomStartEvent) => void;
+}

package/dist/esm/BaseChartProps.js

@@ -0,0 +1,2 @@
+export {};
+// tslint:enable:max-line-length