@progress/kendo-vue-charts 4.3.3 → 4.4.0-dev.202405071452

package/dist/npm/sankey/tooltip.js

@@ -0,0 +1,318 @@
+"use strict";
+
+var __assign = undefined && undefined.__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);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipVue2 = exports.Tooltip = void 0;
+// @ts-ignore
+var Vue = require("vue");
+var allVue = Vue;
+var gh = allVue.h;
+var isV3 = allVue.version && allVue.version[0] === '3';
+var kendo_vue_common_1 = require("@progress/kendo-vue-common");
+var kendo_svg_icons_1 = require("@progress/kendo-svg-icons");
+var kendo_vue_intl_1 = require("@progress/kendo-vue-intl");
+var messages_1 = require("./messages");
+var space = 3;
+var textMargin = "0 ".concat(space, "px");
+var tooltipStyles = {
+  display: 'flex',
+  alignItems: 'center'
+};
+var Square = {
+  name: 'Square',
+  props: {
+    color: String
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("div", {
+      style: {
+        width: '15px',
+        height: '15px',
+        'background-color': this.$props.color,
+        display: 'inline-flex',
+        marginLeft: space
+      }
+    });
+  }
+};
+var Text = {
+  name: 'Text',
+  props: {
+    value: String
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    return h("span", {
+      style: {
+        margin: textMargin
+      }
+    }, [this.$props.value]);
+  }
+};
+var Units = {
+  name: 'Units',
+  props: {
+    value: Number
+  },
+  inject: {
+    kendoLocalizationService: {
+      default: null
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var loc = (0, kendo_vue_intl_1.provideLocalizationService)(this);
+    var message = loc.toLanguageString(messages_1.tooltipUnitFormat, messages_1.messages[messages_1.tooltipUnitFormat]);
+    var formatted = new kendo_vue_intl_1.IntlService('en').format(message, [this.$props.value || 0]);
+    return h(Text, {
+      value: formatted,
+      attrs: this.v3 ? undefined : {
+        value: formatted
+      }
+    });
+  }
+};
+var NodeTooltipContent = {
+  name: 'NodeTooltipContent',
+  props: {
+    dataItem: Object,
+    nodeValue: Number
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props.dataItem,
+      color = _a.color,
+      label = _a.label;
+    return h("div", {
+      style: tooltipStyles,
+      "class": "k-tooltip-content"
+    }, [h(Square, {
+      color: color,
+      attrs: this.v3 ? undefined : {
+        color: color
+      }
+    }), h(Text, {
+      value: label.text,
+      attrs: this.v3 ? undefined : {
+        value: label.text
+      }
+    }), h(Units, {
+      value: this.$props.nodeValue,
+      attrs: this.v3 ? undefined : {
+        value: this.$props.nodeValue
+      }
+    })]);
+  }
+};
+var LinkTooltipContent = {
+  name: 'LinkTooltipContent',
+  props: {
+    dataItem: Object
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props.dataItem,
+      source = _a.source,
+      target = _a.target,
+      value = _a.value;
+    return h("div", {
+      style: tooltipStyles
+    }, [h(Square, {
+      color: source.color,
+      attrs: this.v3 ? undefined : {
+        color: source.color
+      }
+    }), h(Text, {
+      value: source.label.text,
+      attrs: this.v3 ? undefined : {
+        value: source.label.text
+      }
+    }), h(kendo_vue_common_1.Icon, {
+      icon: kendo_svg_icons_1.arrowRightIcon,
+      attrs: this.v3 ? undefined : {
+        icon: kendo_svg_icons_1.arrowRightIcon,
+        name: "arrow-right"
+      },
+      name: "arrow-right"
+    }), h(Square, {
+      color: target.color,
+      attrs: this.v3 ? undefined : {
+        color: target.color
+      }
+    }), h(Text, {
+      value: target.label.text,
+      attrs: this.v3 ? undefined : {
+        value: target.label.text
+      }
+    }), h(Units, {
+      value: value,
+      attrs: this.v3 ? undefined : {
+        value: value
+      }
+    })]);
+  }
+};
+/**
+ * @hidden
+ */
+var TooltipVue2 = {
+  name: 'SankeyTooltip',
+  props: {
+    eventData: Object,
+    tooltipData: Object,
+    nodeContent: [String, Object, Function],
+    linkContent: [String, Object, Function],
+    offset: Number
+  },
+  data: function data() {
+    return {
+      top: '',
+      left: '',
+      visibility: 'hidden'
+    };
+  },
+  mounted: function mounted() {
+    this.element = (0, kendo_vue_common_1.getRef)(this, 'element');
+    this.showTooltip();
+  },
+  updated: function updated() {
+    this.showTooltip();
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.destroyTooltip();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.destroyTooltip();
+  },
+  methods: {
+    destroyTooltip: function destroyTooltip() {
+      // no need to destroy anything
+    },
+    showTooltip: function showTooltip() {
+      var _a = this.$props,
+        offsetOption = _a.offset,
+        tooltipData = _a.tooltipData;
+      var element = this.element;
+      if (!tooltipData || !element) {
+        return;
+      }
+      var size = {
+        width: element.offsetWidth,
+        height: element.offsetHeight
+      };
+      var offset = __assign({}, tooltipData.popupOffset);
+      var popupAlign = tooltipData.popupAlign;
+      offset.left += popupAlign.horizontal === 'left' ? offsetOption : -1 * offsetOption;
+      if (popupAlign.horizontal === 'right') {
+        offset.left -= size.width;
+      }
+      if (popupAlign.vertical === 'bottom') {
+        offset.top -= size.height + offsetOption;
+      } else {
+        offset.top += offsetOption;
+      }
+      this.$data.top = offset.top + 'px';
+      this.$data.left = offset.left + 'px';
+      this.$data.visibility = '';
+    }
+  },
+  // @ts-ignore
+  setup: !isV3 ? undefined : function () {
+    var v3 = !!isV3;
+    return {
+      v3: v3
+    };
+  },
+  // @ts-ignore
+  render: function render(createElement) {
+    var h = gh || createElement;
+    var _a = this.$props,
+      nodeContent = _a.nodeContent,
+      linkContent = _a.linkContent,
+      _b = _a.eventData,
+      dataItem = _b.dataItem,
+      nodeValue = _b.nodeValue,
+      targetType = _b.targetType;
+    var template = targetType === 'node' ? nodeContent : linkContent;
+    var ContentComponent = targetType === 'node' ? NodeTooltipContent : LinkTooltipContent;
+    var content = kendo_vue_common_1.getTemplate.call(this, {
+      h: h,
+      template: template,
+      defaultRendering: h(ContentComponent, {
+        dataItem: dataItem,
+        attrs: this.v3 ? undefined : {
+          dataItem: dataItem,
+          nodeValue: nodeValue
+        },
+        nodeValue: nodeValue
+      })
+    });
+    return h("div", {
+      ref: (0, kendo_vue_common_1.setRef)(this, 'element'),
+      style: {
+        top: this.top,
+        left: this.left,
+        visibility: this.visibility
+      },
+      "class": "k-tooltip k-sankey-tooltip k-chart-tooltip k-chart-shared-tooltip"
+    }, [h("div", {
+      "class": "k-tooltip-content"
+    }, [content])]);
+  }
+};
+exports.TooltipVue2 = TooltipVue2;
+/**
+ * @hidden
+ */
+var Tooltip = TooltipVue2;
+exports.Tooltip = Tooltip;

package/dist/npm/sankey/types.d.ts

@@ -0,0 +1,159 @@
+import { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions, SankeyTooltipEvent, SankeyTooltip as SankeyTooltipInterface, SankeyEvent as SankeyWidgetEvent } from '@progress/kendo-charts';
+import { Legend, Title } from '../common/property-types';
+export { SankeyData, SankeyExportVisualOptions, SankeyHorizontalMargin, SankeyLabel, SankeyLabelDefaults, SankeyLabelStroke, SankeyLegendItem, SankeyLink, SankeyLinkDataItem, SankeyLinkDefaults, SankeyLinkHighlight, SankeyNode, SankeyNodeDataItem, SankeyNodeDefaults, SankeyOptions };
+import { Sankey } from './Sankey';
+/**
+ * The KendoReact Sankey event object.
+ */
+export interface SankeyEvent extends SankeyWidgetEvent {
+    /**
+     * The `Sankey` component that triggered the event.
+     */
+    target: typeof Sankey;
+}
+/**
+ * Represents the Sankey title options.
+ */
+export interface SankeyTitle extends Title {
+}
+/**
+ * Represents the Sankey legend options.
+ */
+export interface SankeyLegend extends Omit<Legend, 'inactiveItems' | 'item'> {
+    /**
+     * The configuration of the legend items.
+     */
+    item?: SankeyLegendItem;
+}
+/**
+ * Represents the props of the Sankey tooltip content component.
+ */
+export interface TooltipContentProps {
+    /**
+     * Represents the dataItem object of the hovered node or link element.
+     */
+    dataItem: SankeyNodeDataItem | SankeyLinkDataItem;
+    /**
+     * The value of the hovered node element.
+     * The value is available only when the hovered element is a node.
+     */
+    nodeValue?: number;
+}
+/**
+ * Represents the props of the Sankey tooltip component.
+ *
+ * @hidden
+ */
+export interface SankeyTooltipProps {
+    /**
+     * The event object of the Sankey tooltip.
+     */
+    eventData: Pick<SankeyTooltipEvent, 'dataItem' | 'nodeValue' | 'targetType'>;
+    /**
+     * The distance between the tooltip and the mouse pointer in pixels.
+     */
+    offset: number;
+    /**
+     * The tooltip data of the Sankey component.
+     */
+    tooltipData: SankeyTooltipEvent['tooltipData'];
+    /**
+     * The content component of the Sankey node tooltip. Can be string that is pointing to a namedSlot or a render function;
+     */
+    nodeContent?: any;
+    /**
+     * The content component of the Sankey link tooltip. Can be string that is pointing to a namedSlot or a render function;
+     */
+    linkContent?: any;
+}
+/**
+ * Represents the Sankey tooltip configuration.
+ */
+export interface SankeyTooltip extends SankeyTooltipInterface {
+    /**
+     * Indicates whether the Sankey tooltips will be rendered.
+     */
+    visible?: boolean;
+    /**
+     * The distance between the tooltip and the mouse pointer in pixels.
+     *
+     * @default 12
+     */
+    offset?: number;
+    /**
+     * The content component of the Sankey node tooltip. Can be string that is pointing to a namedSlot or a render function;
+     */
+    nodeContent?: any;
+    /**
+     * The content component of the Sankey link tooltip. Can be string that is pointing to a namedSlot or a render function;
+     */
+    linkContent?: any;
+}
+/**
+ * Represents the props of the KendoReact [Sankey]({% slug api_charts_sankey %}) component.
+ */
+export interface SankeyProps {
+    /**
+     * The data of the Sankey component containing the `nodes` props.
+     */
+    dataNodes?: SankeyNode[];
+    /**
+     * The data of the Sankey component containing the `links` props.
+     */
+    dataLinks?: SankeyLink[];
+    /**
+     * The `links` default props of the Sankey component.
+     * The value will be applied to all links unless overridden by the `links` prop of the `data` prop.
+     */
+    links?: SankeyLinkDefaults;
+    /**
+     * The `nodes` default props of the Sankey component.
+     * The value will be applied to all nodes unless overridden by the `nodes` prop of the `data` prop.
+     */
+    nodes?: SankeyNodeDefaults;
+    /**
+     * The `labels` default props of the Sankey component.
+     * The value will be applied to all labels unless overridden by the `nodes` label prop of the `data` prop.
+     */
+    labels?: SankeyLabelDefaults;
+    /**
+     * The title configuration of the Sankey component.
+     */
+    title?: SankeyTitle;
+    /**
+     * The legend configuration of the Sankey component.
+     */
+    legend?: SankeyLegend;
+    /**
+     * The configuration of the Sankey tooltips.
+     */
+    tooltip?: SankeyTooltip;
+    /**
+     * If set to `true`, the Sankey component will not perform automatic layout.
+     */
+    disableAutoLayout?: boolean;
+    /**
+     * Fires when the mouse pointer enters a node. Similar to the `mouseenter` event.
+     */
+    onNodeenter?: (event: SankeyEvent) => void;
+    /**
+     * Fires when the mouse pointer leaves a node. Similar to the `mouseleave` event.
+     */
+    onNodeleave?: (event: SankeyEvent) => void;
+    /**
+     * Fires when the mouse pointer enters a link. Similar to the `mouseenter` event,
+     */
+    onLinkenter?: (event: SankeyEvent) => void;
+    /**
+     * Fires when the mouse pointer leaves a link. Similar to the `mouseleave` event.
+     */
+    onLinkleave?: (event: SankeyEvent) => void;
+    /**
+     * Fires when a node is clicked.
+     */
+    onNodeclick?: (event: SankeyEvent) => void;
+    /**
+     * Fires when a link is clicked.
+     */
+    onLinkclick?: (event: SankeyEvent) => void;
+}

package/dist/npm/sankey/types.js

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

package/dist/npm/sankey/utils.d.ts

@@ -0,0 +1,5 @@
+import { createSankeyData as chartsCreateSankeyData } from '@progress/kendo-charts';
+/**
+ * Converts data objects to Sankey data.
+ */
+export declare const createSankeyData: typeof chartsCreateSankeyData;

package/dist/npm/sankey/utils.js

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSankeyData = void 0;
+var kendo_charts_1 = require("@progress/kendo-charts");
+/**
+ * Converts data objects to Sankey data.
+ */
+exports.createSankeyData = kendo_charts_1.createSankeyData;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-vue-charts",
   "description": "Kendo UI for Vue Charts package",
-  "version": "4.3.3",
+  "version": "4.4.0-dev.202405071452",
   "repository": {
     "type": "git",
     "url": "https://github.com/telerik/kendo-vue.git"
@@ -19,7 +19,8 @@
   "scripts": {
     "test": "cd ../../ && npm run test -- --testPathPattern=/packages/charts/.*",
     "start": "gulp start --notsc",
-    "build-package": "gulp build-package"
+    "build-package": "gulp build-package",
+    "e2e": "cd ../../ && npx jest --maxWorkers=4 --config jest.config.e2e.js packages/charts"
   },
   "homepage": "https://www.telerik.com/kendo-vue-ui/",
   "keywords": [
@@ -44,17 +45,18 @@
   },
   "dependencies": {
     "@progress/kendo-charts": "2.3.0",
-    "@progress/kendo-vue-common": "4.3.3",
-    "@progress/kendo-vue-popup": "4.3.3"
+    "@progress/kendo-vue-common": "4.4.0-dev.202405071452",
+    "@progress/kendo-vue-popup": "4.4.0-dev.202405071452"
   },
   "devDependencies": {
     "@progress/kendo-data-query": "^1.0.0",
     "@progress/kendo-drawing": "^1.20.1",
     "@progress/kendo-file-saver": "^1.0.1",
     "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-vue-dropdowns": "4.3.3",
-    "@progress/kendo-vue-inputs": "4.3.3",
-    "@progress/kendo-vue-intl": "4.3.3",
+    "@progress/kendo-vue-buttons": "4.4.0-dev.202405071452",
+    "@progress/kendo-vue-dropdowns": "4.4.0-dev.202405071452",
+    "@progress/kendo-vue-inputs": "4.4.0-dev.202405071452",
+    "@progress/kendo-vue-intl": "4.4.0-dev.202405071452",
     "cldr-core": "^41.0.0",
     "cldr-dates-full": "^41.0.0",
     "cldr-numbers-full": "^41.0.0",