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

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

@@ -7,4 +7,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, Sparkline, SparklineVue2, StockChart, StockChartVue2 };

package/dist/es/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/es/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 };

package/dist/es/sankey/Sankey.js

@@ -0,0 +1,243 @@
+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 { validatePackage, getRef, setRef, templateRendering, getListeners } from '@progress/kendo-vue-common';
+import { packageMetadata } from './../package-metadata';
+import { loadTheme } from './theme-service';
+import { Sankey as SankeyWidget } from '@progress/kendo-charts';
+import { Tooltip } from './tooltip';
+var defaultTooltipProps = {
+  visible: true,
+  offset: 12
+};
+/**
+ * @hidden
+ */
+var SankeyVue2 = {
+  name: 'KendoSankey',
+  // @ts-ignore
+  emits: {
+    linkclick: null,
+    linkenter: null,
+    linkleave: null,
+    nodeclick: null,
+    nodeenter: null,
+    nodeleave: null
+  },
+  inheritAttrs: false,
+  props: {
+    dataNodes: {
+      type: Array,
+      required: true
+    },
+    dataLinks: {
+      type: Array,
+      required: true
+    },
+    disableAutoLayout: Boolean,
+    labels: Object,
+    legend: Object,
+    links: Object,
+    nodes: Object,
+    title: Object,
+    tooltip: Object
+  },
+  created: function created() {
+    validatePackage(packageMetadata);
+    this.instance = null;
+  },
+  data: function data() {
+    return {
+      currentTooltip: null
+    };
+  },
+  watch: {
+    dataNodes: function dataNodes() {
+      this.update(this);
+    },
+    dataLinks: function dataLinks() {
+      this.update(this);
+    },
+    links: function links() {
+      this.update(this);
+    },
+    nodes: function nodes() {
+      this.update(this);
+    },
+    labels: function labels() {
+      this.update(this);
+    },
+    title: function title() {
+      this.update(this);
+    },
+    legend: function legend() {
+      this.update(this);
+    },
+    disableAutoLayout: function disableAutoLayout() {
+      this.update(this);
+    },
+    tooltip: function tooltip() {
+      this.update(this);
+    }
+  },
+  computed: {
+    sankeyClasses: function sankeyClasses() {
+      var _a;
+      var className = this.$attrs.class;
+      return _a = {}, _a['k-chart k-sankey'] = true, _a[className] = Boolean(className), _a;
+    }
+  },
+  mounted: function mounted() {
+    this.element = getRef(this, 'element');
+    this.createSankey(this);
+  },
+  destroyed: !!isV3 ? undefined : function () {
+    this.destroySankey();
+  },
+  // @ts-ignore
+  unmounted: function unmounted() {
+    this.destroySankey();
+  },
+  methods: {
+    exportVisual: function exportVisual(options) {
+      return this.instance.exportVisual(options);
+    },
+    destroySankey: function destroySankey() {
+      if (this.instance) {
+        this.instance.destroy();
+        this.instance = null;
+      }
+    },
+    createSankey: function createSankey() {
+      var _this = this;
+      var element = this.element;
+      if (!element) {
+        return;
+      }
+      var options = this.sankeyOptions();
+      loadTheme(element.ownerDocument, function (theme) {
+        _this.instance = new SankeyWidget(element, options, theme);
+        _this.bindEvents(_this.instance);
+      });
+    },
+    update: function update() {
+      if (this.instance) {
+        this.instance.setOptions(this.sankeyOptions());
+      }
+    },
+    bindEvents: function bindEvents(instance) {
+      instance.bind('nodeEnter', this.triggerEvent);
+      instance.bind('nodeLeave', this.triggerEvent);
+      instance.bind('linkEnter', this.triggerEvent);
+      instance.bind('linkLeave', this.triggerEvent);
+      instance.bind('nodeClick', this.triggerEvent);
+      instance.bind('linkClick', this.triggerEvent);
+      instance.bind('tooltipShow', this.onTooltipShow);
+      instance.bind('tooltipHide', this.onTooltipHide);
+    },
+    triggerEvent: function triggerEvent(e) {
+      var event = __assign(__assign({}, e), {
+        target: this
+      });
+      this.$emit(e.type.toLowerCase(), event);
+    },
+    sankeyOptions: function sankeyOptions() {
+      var _a = this.$props,
+        dataNodes = _a.dataNodes,
+        dataLinks = _a.dataLinks,
+        links = _a.links,
+        nodes = _a.nodes,
+        labels = _a.labels,
+        title = _a.title,
+        legend = _a.legend,
+        disableAutoLayout = _a.disableAutoLayout,
+        tooltip = _a.tooltip;
+      var data = {
+        nodes: dataNodes,
+        links: dataLinks
+      };
+      return {
+        data: data,
+        links: links,
+        nodes: nodes,
+        labels: labels,
+        title: title,
+        legend: legend,
+        disableAutoLayout: disableAutoLayout,
+        tooltip: __assign(__assign({}, defaultTooltipProps), tooltip)
+      };
+    },
+    onTooltipShow: function onTooltipShow(event) {
+      var visible = __assign(__assign({}, defaultTooltipProps), this.$props.tooltip).visible;
+      if (visible) {
+        var nextTooltipProps = {
+          tooltipData: event.tooltipData,
+          eventData: {
+            dataItem: event.dataItem,
+            nodeValue: event.nodeValue,
+            targetType: event.targetType
+          }
+        };
+        this.currentTooltip = nextTooltipProps;
+      }
+    },
+    onTooltipHide: function onTooltipHide() {
+      this.currentTooltip = null;
+    }
+  },
+  // @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.tooltip || {},
+      nodeContent = _a.nodeContent,
+      linkContent = _a.linkContent,
+      offset = _a.offset;
+    var toolTipNode = templateRendering.call(this, nodeContent, getListeners.call(this));
+    var toolTipLink = templateRendering.call(this, linkContent, getListeners.call(this));
+    var rendering = [h("div", {
+      ref: setRef(this, 'element'),
+      "class": this.sankeyClasses,
+      style: this.$attrs.style
+    }), this.currentTooltip && h(Tooltip, {
+      tooltipData: this.currentTooltip.tooltipData,
+      attrs: this.v3 ? undefined : {
+        tooltipData: this.currentTooltip.tooltipData,
+        eventData: this.currentTooltip.eventData,
+        offset: offset || 12,
+        nodeContent: toolTipNode,
+        linkContent: toolTipLink
+      },
+      eventData: this.currentTooltip.eventData,
+      offset: offset || 12,
+      nodeContent: toolTipNode,
+      linkContent: toolTipLink
+    })];
+    return isV3 ? rendering : h("div", [rendering]);
+  }
+};
+/**
+ * @hidden
+ */
+var Sankey = SankeyVue2;
+export { Sankey, SankeyVue2 };

package/dist/es/sankey/main.d.ts

@@ -0,0 +1,4 @@
+import { Sankey } from './Sankey';
+import { type SankeyProps, type SankeyEvent, type SankeyNode, type SankeyLink, type SankeyLabel, type SankeyData, type SankeyLinkHighlight, type SankeyLinkDefaults, type SankeyLabelDefaults, type SankeyNodeDefaults, type SankeyLinkDataItem, type SankeyNodeDataItem, type TooltipContentProps, type SankeyExportVisualOptions, type SankeyTitle, type SankeyLegend, type SankeyTooltipProps, type SankeyTooltip, type SankeyOptions } from './types';
+import { createSankeyData } from './utils';
+export { Sankey, SankeyProps, SankeyEvent, SankeyLinkHighlight, SankeyNode, SankeyLink, SankeyLabel, SankeyLinkDefaults, SankeyLabelDefaults, SankeyNodeDefaults, SankeyLinkDataItem, SankeyNodeDataItem, TooltipContentProps, SankeyData, SankeyExportVisualOptions, SankeyTitle, SankeyLegend, SankeyTooltipProps, SankeyTooltip, SankeyOptions, createSankeyData };

package/dist/es/sankey/main.js

@@ -0,0 +1,3 @@
+import { Sankey } from './Sankey';
+import { createSankeyData } from './utils';
+export { Sankey, createSankeyData };

package/dist/es/sankey/messages.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @hidden
+ */
+export declare const tooltipUnitFormat = "sankey.tooltipUnitFormat";
+/**
+ * @hidden
+ */
+export declare const messages: {
+    "sankey.tooltipUnitFormat": string;
+};

package/dist/es/sankey/messages.js

@@ -0,0 +1,11 @@
+var _a;
+/**
+ * @hidden
+ */
+export var tooltipUnitFormat = 'sankey.tooltipUnitFormat';
+/**
+ * @hidden
+ */
+export var messages = (_a = {},
+    _a[tooltipUnitFormat] = '({0} units)',
+    _a);

package/dist/es/sankey/theme-service.d.ts

@@ -0,0 +1,5 @@
+import { SankeyTheme } from '@progress/kendo-charts';
+/**
+ * @hidden
+ */
+export declare const loadTheme: (doc: Document, done: (store: SankeyTheme) => void) => void;

package/dist/es/sankey/theme-service.js

@@ -0,0 +1,101 @@
+var font = function (style) { return "".concat(style.fontWeight, " ").concat(style.fontSize, " ").concat(style.fontFamily); };
+var computedBackgroundColor = function (element) { return window.getComputedStyle(element).backgroundColor; };
+var letterPos = function (letter) { return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0); };
+var seriesPos = function (name) {
+    var alpha = name.match(/series-([a-z])$/);
+    if (alpha !== null) {
+        return letterPos(alpha[1]);
+    }
+    var num = name.split('--series-')[1];
+    return parseInt(num, 10) - 1;
+};
+var COLORS_COUNT = 30;
+var seriesTemplate = function () {
+    var result = "\n      <div class=\"k-var--series-a\"></div>\n      <div class=\"k-var--series-b\"></div>\n      <div class=\"k-var--series-c\"></div>\n      <div class=\"k-var--series-d\"></div>\n      <div class=\"k-var--series-e\"></div>\n      <div class=\"k-var--series-f\"></div>\n";
+    for (var i = 0; i < COLORS_COUNT; i++) {
+        result += "\n      <div class=\"k-var--series-".concat(i + 1, "\"></div>");
+    }
+    return result;
+};
+var template = "\n    <div class=\"k-var--background\"></div>\n    <div class=\"k-var--normal-text-color\"></div>\n    <div class=\"k-var--chart-major-lines\"></div>\n\n    <div class=\"k-widget k-chart\">\n        <div class=\"k-var--chart-font\"></div>\n        <div class=\"k-var--chart-title-font\"></div>\n    </div>\n    <div class=\"k-var--series-unset\"></div>\n    <div class=\"k-var--series\">\n      ".concat(seriesTemplate(), "\n    </div>\n");
+var ThemeService = /** @class */ (function () {
+    function ThemeService(store) {
+        this.store = store;
+    }
+    ThemeService.prototype.setStyle = function (field, value) {
+        var path = field.split('.');
+        var data = this.store;
+        path.forEach(function (p, i, arr) {
+            if (i < arr.length - 1) {
+                data = data[p] = data[p] || {};
+            }
+        });
+        var top = path.pop();
+        if (top) {
+            data[top] = value;
+        }
+    };
+    ThemeService.prototype.setColors = function () {
+        this.mapColor('labels.color', 'normal-text-color');
+        this.mapColor('labels.stroke.color', 'background');
+        this.mapColor('links.color', 'chart-major-lines');
+        this.mapColor('legend.labels.color', 'normal-text-color');
+        this.mapColor('title.color', 'normal-text-color');
+    };
+    ThemeService.prototype.setFonts = function () {
+        var titleFont = font(this.queryStyle('chart-title-font'));
+        var defaultFont = font(this.queryStyle('chart-font'));
+        this.setStyle('title.font', titleFont);
+        this.setStyle('labels.font', defaultFont);
+        this.setStyle('legend.labels.font', defaultFont);
+    };
+    ThemeService.prototype.setNodeColors = function () {
+        var element = this.element;
+        if (!element) {
+            return;
+        }
+        var series = [].slice.call(element.querySelectorAll('.k-var--series div'));
+        var unsetColor = computedBackgroundColor(element.querySelector('.k-var--series-unset'));
+        var colors = series.reduce(function (arr, el) {
+            var pos = seriesPos(el.className);
+            var color = computedBackgroundColor(el);
+            if (color !== unsetColor) {
+                arr[pos] = color;
+            }
+            return arr;
+        }, [] // Will populate the colors in this array
+        );
+        this.setStyle('nodeColors', colors);
+    };
+    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--".concat(varName)));
+    };
+    return ThemeService;
+}());
+/**
+ * @hidden
+ */
+export var loadTheme = function (doc, done) {
+    var store = {
+        nodeColors: []
+    };
+    var service = new ThemeService(store);
+    var container = service.element = doc.createElement('div');
+    container.style.display = 'none';
+    container.innerHTML = template;
+    doc.body.appendChild(container);
+    try {
+        service.setColors();
+        service.setFonts();
+        service.setNodeColors();
+    }
+    finally {
+        doc.body.removeChild(service.element);
+        service.element = null;
+        done(store);
+    }
+};

package/dist/es/sankey/tooltip.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 { SankeyTooltipProps } from './types';
+/**
+ * @hidden
+ */
+export interface TooltipState {
+    element: HTMLElement | null;
+}
+/**
+ * @hidden
+ */
+export interface TooltipComputed {
+    [key: string]: any;
+}
+/**
+ * @hidden
+ */
+export interface TooltipMethods {
+    [key: string]: any;
+}
+interface TooltipProps extends SankeyTooltipProps {
+}
+/**
+ * @hidden
+ */
+export interface TooltipData {
+    top: string;
+    left: string;
+    visibility: string;
+}
+/**
+ * @hidden
+ */
+export interface TooltipAll extends Vue2type, TooltipMethods, TooltipData, TooltipComputed, TooltipState {
+}
+/**
+ * @hidden
+ */
+declare let TooltipVue2: ComponentOptions<TooltipAll, DefaultData<TooltipData>, DefaultMethods<TooltipAll>, TooltipComputed, RecordPropsDefinition<TooltipProps>>;
+/**
+ * @hidden
+ */
+export declare type TooltipType = DefineComponent<TooltipProps, any, TooltipData, TooltipComputed, TooltipMethods, {}, {}, {}, string, TooltipProps, TooltipProps, {}>;
+/**
+ * @hidden
+ */
+declare const Tooltip: TooltipType;
+export { Tooltip, TooltipVue2 };