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

package/dist/es/sankey/tooltip.js

@@ -0,0 +1,311 @@
+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 { getRef, setRef, Icon, getTemplate } from '@progress/kendo-vue-common';
+import { arrowRightIcon } from '@progress/kendo-svg-icons';
+import { provideLocalizationService, IntlService } from '@progress/kendo-vue-intl';
+import { messages, tooltipUnitFormat } from './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 = provideLocalizationService(this);
+    var message = loc.toLanguageString(tooltipUnitFormat, messages[tooltipUnitFormat]);
+    var formatted = new 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(Icon, {
+      icon: arrowRightIcon,
+      attrs: this.v3 ? undefined : {
+        icon: 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 = 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 = 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: 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])]);
+  }
+};
+/**
+ * @hidden
+ */
+var Tooltip = TooltipVue2;
+export { Tooltip, TooltipVue2 };

package/dist/es/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/es/sankey/types.js

@@ -0,0 +1 @@
+export {};

package/dist/es/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/es/sankey/utils.js

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

package/dist/esm/main.d.ts

@@ -10,4 +10,5 @@ export * from './common/api-types';
 export * from './common/events';
 export * from './common/charts';
 export * from './methods/main';
+export * from './sankey/main';
 export { Chart, ChartVue2, ChartProps, Sparkline, SparklineVue2, SparklineProps, StockChart, StockChartVue2, StockChartProps };

package/dist/esm/main.js

@@ -7,4 +7,5 @@ export * from './common/api-types.js';
 export * from './common/events.js';
 export * from './common/charts.js';
 export * from './methods/main.js';
+export * from './sankey/main.js';
 export { Chart, ChartVue2, Sparkline, SparklineVue2, StockChart, StockChartVue2 };

package/dist/esm/package-metadata.js

@@ -5,7 +5,7 @@ export var packageMetadata = {
     name: '@progress/kendo-vue-charts',
     productName: 'Kendo UI for Vue',
     productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
-    publishDate: 1714476800,
+    publishDate: 1715092837,
     version: '',
     licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
 };

package/dist/esm/sankey/Sankey.d.ts

@@ -0,0 +1,61 @@
+import * as Vue from 'vue';
+import { DefineComponent } from 'vue';
+/**
+ * @hidden
+ */
+declare type Vue2type = Vue.default;
+/**
+ * @hidden
+ */
+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 { SankeyExportVisualOptions, SankeyProps } from './types';
+import { Group } from '@progress/kendo-drawing';
+import { Sankey as SankeyWidget } from '@progress/kendo-charts';
+/**
+ * @hidden
+ */
+export interface SankeyState {
+    instance: SankeyWidget | null;
+    element: HTMLElement | null;
+}
+/**
+ * @hidden
+ */
+export interface SankeyComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface SankeyMethods {
+    [key: string]: any;
+    exportVisual: (options?: SankeyExportVisualOptions) => Group;
+}
+/**
+ * @hidden
+ */
+export interface SankeyComponentData {
+    currentTooltip: any | null;
+}
+/**
+ * @hidden
+ */
+export interface SankeyAll extends Vue2type, SankeyMethods, SankeyComponentData, SankeyComputed, SankeyState {
+}
+/**
+ * @hidden
+ */
+declare let SankeyVue2: ComponentOptions<SankeyAll, DefaultData<SankeyComponentData>, DefaultMethods<SankeyAll>, SankeyComputed, RecordPropsDefinition<SankeyProps>>;
+/**
+ * @hidden
+ */
+export declare type SankeyType = DefineComponent<SankeyProps, any, SankeyComponentData, SankeyComputed, SankeyMethods, {}, {}, {}, string, SankeyProps, SankeyProps, {}>;
+/**
+ * @hidden
+ */
+declare const Sankey: SankeyType;
+export { Sankey, SankeyVue2 };