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

package/dist/npm/sankey/Sankey.js

@@ -0,0 +1,250 @@
+"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.SankeyVue2 = exports.Sankey = 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 package_metadata_1 = require("./../package-metadata");
+var theme_service_1 = require("./theme-service");
+var kendo_charts_1 = require("@progress/kendo-charts");
+var tooltip_1 = require("./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() {
+    (0, kendo_vue_common_1.validatePackage)(package_metadata_1.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 = (0, kendo_vue_common_1.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();
+      (0, theme_service_1.loadTheme)(element.ownerDocument, function (theme) {
+        _this.instance = new kendo_charts_1.Sankey(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 = kendo_vue_common_1.templateRendering.call(this, nodeContent, kendo_vue_common_1.getListeners.call(this));
+    var toolTipLink = kendo_vue_common_1.templateRendering.call(this, linkContent, kendo_vue_common_1.getListeners.call(this));
+    var rendering = [h("div", {
+      ref: (0, kendo_vue_common_1.setRef)(this, 'element'),
+      "class": this.sankeyClasses,
+      style: this.$attrs.style
+    }), this.currentTooltip && h(tooltip_1.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]);
+  }
+};
+exports.SankeyVue2 = SankeyVue2;
+/**
+ * @hidden
+ */
+var Sankey = SankeyVue2;
+exports.Sankey = Sankey;

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

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createSankeyData = exports.Sankey = void 0;
+var Sankey_1 = require("./Sankey");
+Object.defineProperty(exports, "Sankey", { enumerable: true, get: function () { return Sankey_1.Sankey; } });
+var utils_1 = require("./utils");
+Object.defineProperty(exports, "createSankeyData", { enumerable: true, get: function () { return utils_1.createSankeyData; } });

package/dist/npm/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/npm/sankey/messages.js

@@ -0,0 +1,14 @@
+"use strict";
+var _a;
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.messages = exports.tooltipUnitFormat = void 0;
+/**
+ * @hidden
+ */
+exports.tooltipUnitFormat = 'sankey.tooltipUnitFormat';
+/**
+ * @hidden
+ */
+exports.messages = (_a = {},
+    _a[exports.tooltipUnitFormat] = '({0} units)',
+    _a);

package/dist/npm/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/npm/sankey/theme-service.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.loadTheme = void 0;
+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
+ */
+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);
+    }
+};
+exports.loadTheme = loadTheme;

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