@ebiz/designer-components 0.0.18

package/src/components/charts/components/AssembleBubbleChart/handleRootData.js

@@ -0,0 +1,165 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import cloneDeep from '../../util/cloneDeep';
+import { random } from '../../util/math';
+import { CHARTTYPE } from './BaseOption';
+
+function setChartPosition(polarInfo, chartInstance) {
+  let radius = polarInfo.radius, widthDis, heightDis;
+  const width = chartInstance.getWidth();
+  const height = chartInstance.getHeight();
+
+  const getNumber = (value, { callback1, callback2, callback3 }) => {
+    let correctValue;
+    if (typeof value !== 'number') {
+      if (value.indexOf('%') !== -1) { // 有百分比的字符串数字
+        correctValue = callback1(value);
+      } else { // 无百分比的字符串数字
+        correctValue = callback2(value);
+      }
+    } else { // 数值
+      correctValue = callback3(value);
+    }
+    return correctValue;
+  };
+
+  radius = getNumber(radius, {
+    callback1: (value) => value.substring(0, value.indexOf('%')) / 100,
+    callback2: (value) => parseFloat(value) / Math.min(height, width),
+    callback3: (value) => value / Math.min(height, width),
+  });
+
+  widthDis = getNumber(polarInfo.center[0], {
+    callback1: (value) => width * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
+    callback2: (value) => parseFloat(value),
+    callback3: (value) => value,
+  });
+
+  heightDis = getNumber(polarInfo.center[1], {
+    callback1: (value) => height * (value.substring(0, value.indexOf('%')) / 100 - radius / 2),
+    callback2: (value) => parseFloat(value),
+    callback3: (value) => value,
+  });
+
+  return { radius, widthDis, heightDis };
+}
+
+export function handleRootData(d3, { baseOption, chartInstance, iChartOption, chartType }) {
+  // polar的信息会在index中被删除，此处需要储存一份用于计算节点坐标等。
+  const polarInfo = cloneDeep(baseOption.polar);
+  const { textStyle = {}, sortType = 'decline' } = iChartOption;
+  let distance = iChartOption.distance;
+  if (iChartOption.distance === undefined) {
+    switch (chartType) {
+      case CHARTTYPE.NON_NESTED:
+        distance = 50;
+        break;
+      default:
+        distance = 5;
+        break;
+    }
+  }
+  const stratify = (sourceData) => {
+    let sortResult = d3
+      .stratify()
+      .parentId(function (d) {
+        return d.id.substring(0, d.id.lastIndexOf('.'));
+      })(sourceData)
+      .sum(function (d) {
+        return d.value || 0;
+      });
+    switch (sortType) {
+      case 'decline': // 降序（中心向外，球尺寸依次减小）
+        sortResult = sortResult.sort((a, b) => b.value - a.value);
+        break;
+      case 'ascend': // 升序（中心向外，球尺寸依次增大）
+        sortResult = sortResult.sort((a, b) => a.value - b.value);
+        break;
+      case 'unset':  // 不设置
+        break;
+      default:
+        break;
+    }
+    return sortResult;
+  };
+  // 给baseOptionion设置renderItem,且只能设置一次，多次则会造成视图重叠
+  baseOption.series[baseOption.series.length - 1].renderItem = (params, api) => {
+    const displayRoot = stratify(baseOption.dataset[0].source);
+    const context = params.context;
+    if (!context.layout) {
+      context.layout = true;
+      context.nodes = {};
+      d3
+        .pack()
+        .size([api.getWidth() - 2, api.getHeight() - 2])
+        .padding(distance)(displayRoot);
+      displayRoot.descendants().forEach(node => { context.nodes[node.id] = node; });
+    }
+    const node = context.nodes[api.value('id')];
+    if (!node || node.r <= 0) {
+      return;
+    }
+    // 设置label值是否显示，若有嵌套则不显示，否则显示
+    const nodeName = (!node.children || !node.children.length) ? node.data.label : '';
+    const { radius, widthDis, heightDis } = setChartPosition(polarInfo, chartInstance);
+    return {
+      type: 'circle',
+      // 定义球的坐标及半径
+      shape: {
+        cx: node.x * radius + widthDis,
+        cy: node.y * radius + heightDis,
+        // 若移动页面使得球的半径小于0时则取反
+        r: node.r * radius > 0 ? node.r * radius : -node.r * radius,
+      },
+      transition: ['shape'],
+      z2: api.value('depth') * 2,
+      // 定义球的文本信息等
+      textContent: {
+        type: 'text',
+        style: {
+          text: (node.depth !== 0 && node.data.showLabel) ? (textStyle.formatter && textStyle.formatter(node) || nodeName) : '',
+          fontFamily: 'Arial',
+          width: node.r,
+          height: node.r,
+          borderRadius: node.r,
+          // 文本溢出显示
+          overflow: 'visible',
+          fontSize: Math.max(node.r / 3, 12),
+          fill: chartType !== CHARTTYPE.NESTED ? '#ffffff' : node.data.textColor, // 设计稿白主题默认白色
+          ...textStyle
+        },
+      },
+      // 设置文本显示的位置
+      textConfig: { position: 'inside' },
+      style: {
+        // 设置球的边框色
+        stroke: node.data.borderColor,
+        // 设置球的背景色
+        fill: node.data.color,
+      },
+      // 设置球的跳动范围
+      keyframeAnimation: {
+        duration: 3000,
+        loop: true,
+        delay: random() * 2000,
+        keyframes: [
+          { y: -3, percent: 0.5, easing: 'cubicOut' },
+          { y: 0, percent: 1, easing: 'bounceOut' },
+          { x: -3, percent: 0.5, easing: 'cubicOut' },
+          { x: 0, percent: 1, easing: 'bounceOut' },
+        ],
+      },
+    };
+  };
+}
+
+

package/src/components/charts/components/AssembleBubbleChart/handleSeriesData.js

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import { CHARTTYPE } from "./BaseOption";
+import { getColor, codeToRGB } from "../../util/color";
+import chartToken from "./chartToken";
+
+export function handleSeriesData(iChartOption, baseOpt, chartType) {
+  const sourceData = [
+    {
+      depth: 0,
+      id: 'option',
+      value: 1255,
+      type: undefined,
+      label: undefined,
+    }
+  ];
+  const legendData = [];
+
+  const loopData = (data, depth = 1, parentInfo = { id: 'option' }) => {
+    data.forEach((item, index) => {
+      item.depth = depth;
+      item.id = `${parentInfo.id}.${index}`;
+      item.textColor = chartToken.labelColor;
+      if (depth === 1) {
+        let hasRecordIndex = legendData.findIndex(v => v === item.type);
+        item.color = getColor(iChartOption.color, hasRecordIndex !== -1 ? hasRecordIndex : legendData.length);
+        item.borderColor = item.color;
+      } else {
+        item.type = parentInfo.type;
+        item.color = parentInfo.color;
+        item.borderColor = parentInfo.borderColor;
+      }
+      sourceData.push(item);
+      if (!legendData.includes(item.type)) {
+        legendData.push(item.type);
+      }
+      if (chartType === CHARTTYPE.NESTED && item.children && item.children.length) {
+        if (item.depth === 1) {
+          item.color = codeToRGB(item.color, .2);
+        }
+        loopData(item.children, depth + 1, item);
+      }
+    });
+  };
+
+  loopData(iChartOption.data);
+
+  baseOpt.dataset[0].source = sourceData;
+
+  baseOpt.legend.data = legendData;
+
+  [...legendData].reverse().forEach((item) => {
+    baseOpt.series.unshift({
+      name: item,
+      type: 'pie',
+      data: [],
+      radius: ['0%', '0%'],
+      colorBy: 'data',
+    });
+  });
+}

package/src/components/charts/components/AssembleBubbleChart/index.js

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import cloneDeep from '../../util/cloneDeep';
+import BaseOption from './BaseOption';
+import { defaultTooltipFormatter, judgeType, bindLegendEvent } from './handleOption';
+import { handleRootData } from './handleRootData';
+import { handleSeriesData } from './handleSeriesData';
+import init from '../../option/init';
+import { isArray } from '../../util/type';
+import { CHART_TYPE } from '../../util/constants';
+import PolarCoordSys from '../../option/PolarSys';
+
+class AssembleBubbleChart {
+
+  static name = CHART_TYPE.ASSEMBLE_BUBBLE;
+  static chartType;
+
+  constructor(iChartOption, chartInstance, plugins) {
+    this.baseOption = cloneDeep(BaseOption);
+    this.iChartOption = init(iChartOption);
+    this.chartInstance = chartInstance;
+    this.plugins = plugins;
+    this.updateOption(chartInstance);
+  }
+
+  updateOption(chartInstance) {
+    this.iChartOption.position = this.iChartOption.position ?? this.iChartOption.chartPosition;
+    const { d3 } = this.plugins;
+    if (!d3) throw new Error('您必须安装d3才可以使用聚合气泡图');
+    if (!isArray(this.iChartOption.color)) { this.iChartOption.color = [this.iChartOption.color]; }
+    // 判断图表类型
+    judgeType(this);
+    // 装载除series之外的其他配置
+    PolarCoordSys(this.baseOption, this.iChartOption, CHART_TYPE.ASSEMBLE_BUBBLE);
+    // 补齐默认的tooltip.formatter
+    defaultTooltipFormatter(this.baseOption);
+    // 处理dataset、legend.data、补全series
+    handleSeriesData(this.iChartOption, this.baseOption, this.chartType);
+    // 编写自定义renderItem函数
+    handleRootData(d3, this);
+    // 聚合气泡图属于自定义系列，使用polar会报错，需要删除
+    delete this.baseOption.polar;
+    // 自定义系列的图例点击事件需要自行绑定
+    bindLegendEvent(this.baseOption, chartInstance);
+  }
+
+  getOption() {
+    return this.baseOption;
+  }
+
+  setOption(option) {
+    this.baseOption = option;
+  }
+}
+
+export default AssembleBubbleChart;

package/src/components/charts/components/AutonaviMapChart/index.js

@@ -0,0 +1,162 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import BaseChart from '../BaseChart';
+import * as echarts from 'echarts'
+import { CHART_TYPE } from '../../util/constants';
+
+// 常规的调用方法
+let amapPromise = null
+
+export default class AutonaviMapChart extends BaseChart {
+
+  static name = CHART_TYPE.AUTONAVI_MAP
+
+  constructor() {
+    super();
+    // 图表echarts实例
+    this.echartsIns = null;
+    // 图表icharts实例
+    this.ichartsIns = null;
+
+    // 图表echarts配置项
+    this.eChartOption = null;
+    // 图表icharts配置项
+    this.iChartOption = null;
+
+    // 图表渲染容器
+    this.dom = null;
+    // 图表配置项
+    this.option = null;
+  }
+
+  getAmap (option) {
+    if (!amapPromise) {
+      const key = option.key;
+      const url = option.url;
+      const version = option.version || option.ver || option.v;
+      amapPromise = new Promise((resolve) => {
+        const cbName = 'amap' + Date.now();
+        let script = document.createElement('script');
+        window[cbName] = resolve;
+        let src = `${url}?v=${version}&key=${key}`;
+        if (option.plugin) {
+          src += `&plugin=${option.plugin}`;
+        }
+        script.src = `${src}&callback=${cbName}`;
+        script.onload = () => resolve();
+        document.body.appendChild(script);
+      })
+    }
+    return amapPromise;
+  }
+
+  // 初始化图表渲染容器
+  init (dom) {
+    this.uninstall();
+    this.dom = dom;
+    this.echartsIns = echarts.init(this.dom);
+  }
+
+  // 初始化图表渲染配置
+  setSimpleOption (chartName, option) {
+    this.option = option;
+    this.getAmap(this.option).then(() => {
+      this.echartsIns.setOption(this.option);
+      this.setResizeObserver();
+    })
+  }
+
+  // 图表渲染回调
+  render () {
+    this.initDom() // 渲染dom
+    this.renderCallBack && this.renderCallBack(this);
+  }
+
+  // 图表渲染完成时回调
+  onRenderReady (callback) {
+    this.renderCallBack = callback;
+  }
+
+  // 渲染dom
+  initDom () {
+
+  }
+
+
+  // 监听容器变化
+  setResizeObserver () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    this.resizeObserver = new ResizeObserver(entries => {
+      this.resizeDom();
+    });
+    this.resizeObserver.observe(this.dom);
+  }
+
+  resizeDom () {
+    this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
+  }
+
+  // 图表刷新，刷新配置项
+  refresh (option) {
+    this.iChartOption = option;
+    this.setSimpleOption('AutonaviMapChart', this.iChartOption);
+    this.resizeDom();
+  }
+
+  // 图表刷新，仅刷新数据
+  refreshData (data) {
+    this.iChartOption.series[0].data = data;
+    this.refresh(this.iChartOption);
+  }
+
+  // 刷新图表自适应宽度
+  setResize () {
+    this.resizeDom();
+  }
+
+  // 销毁图表
+  uninstall () {
+    if (this.resizeObserver) {
+      this.resizeObserver.disconnect();
+      this.resizeObserver = null;
+    }
+    // 销毁ECharts实例
+    if (this.echartsIns && !this.echartsIns.isDisposed()) {
+      this.echartsIns.dispose();
+    }
+    this.echartsIns = null;
+    this.dom = null;
+  }
+
+  // 获取到ECharts实例
+  getEchartsInstance () {
+    return this.echartsIns;
+  }
+
+  // 获取到ECharts配置项
+  getEchartsOption () {
+    return this.echartsIns.getOption();
+  }
+
+  // 获取 ECharts 高德地图组件
+  getAmapComponent () {
+    return this.echartsIns.getModel().getComponent('amap');
+  }
+
+  // 获取高德地图实例
+  getAmapInstance () {
+    return this.getAmapComponent().getAMap();
+  }
+}

package/src/components/charts/components/BaiduMapChart/index.js

@@ -0,0 +1,148 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import BaseChart from '../BaseChart';
+import * as echarts from 'echarts';
+import 'echarts/extension/bmap/bmap';
+import { CHART_TYPE } from '../../util/constants';
+
+// 判断map资源加载的flag
+let mapApiLoaded = false;
+export default class BaiduMapChart extends BaseChart {
+
+    static name = CHART_TYPE.BAIDU_MAP
+
+    constructor() {
+        super();
+        // 图表echarts实例
+        this.echartsIns = null;
+        // 图表渲染容器
+        this.dom = null;
+        // 图表配置项
+        this.option = null;
+        // 图表所需数据
+        this.data = null;
+        // 图表容器的宽高变化监听器
+        this.resizeObserver = null;
+    }
+
+    // 初始化图表渲染容器
+    init(dom) {
+        this.uninstall();
+        this.dom = dom;
+    }
+
+    // 初始化图表渲染配置
+    setSimpleOption(chartName, option) {
+        this.option = option;
+    }
+
+    loadMap({ key, version, url }) {
+        return new Promise((resolve) => {
+            if (mapApiLoaded) {
+                resolve(window.BMap);
+                return
+            }
+            let cbName = 'bmap' + Date.now();
+            let script = document.createElement('script');
+            let ver = version || '2.0';
+
+            window[cbName] = function () {
+                mapApiLoaded = true;
+                resolve(window.BMap);
+            }
+            script.src = [`${url}?${ver}`, `ak=${key}`, `callback=${cbName}`].join('&');
+            document.body.appendChild(script);
+        })
+    }
+
+    // 加载百度api，并渲染图表
+    render() {
+        let url = this.option.url;
+        let ver = this.option.v || '2.0';
+        let key = this.option.key;
+        this.loadMap({ key, version: ver, url }).then(() => {
+            this.renderInit();
+        })
+    }
+
+    // 渲染图表
+    renderInit() {
+        this.echartsIns = echarts.init(this.dom);
+        // 渲染
+        this.setOption(this.option);
+        this.setResizeObserver();
+        // 图表渲染完成时回调
+        this.renderCallBack && this.renderCallBack(this.echartsIns);
+    }
+
+    // 第一次渲染: 调用echarts原生的setOption
+    setOption(option) {
+        this.echartsIns.setOption(option);
+    }
+
+    // 图表渲染完成时回调
+    onRenderReady(callback) {
+        this.renderCallBack = callback;
+    }
+
+    // 监听容器变化
+    setResizeObserver() {
+        this.resizeObserver = new ResizeObserver(entries => {
+            this.resizeDom();
+        });
+        this.resizeObserver.observe(this.dom);
+    }
+
+    resizeDom() {
+        this.echartsIns && this.echartsIns.resize && this.echartsIns.resize();
+    }
+
+    // 图表刷新，包括刷新配置和数据
+    refresh(iChartOption) {
+        this.iChartOption = iChartOption;
+        this.setSimpleOption(this.chartName, iChartOption);
+        this.render();
+    }
+
+    // 图表刷新，仅刷新数据
+    refreshData(data) {
+        this.iChartOption.series[0].data = data;
+        this.refresh(this.iChartOption);
+    }
+
+    // 刷新图表自适应宽度
+    setResize() {
+        this.resizeDom();
+    }
+
+    // 销毁图表
+    uninstall() {
+        // 卸载window resize监听功能
+        window.removeEventListener('resize', this.throttleResize);
+        // 卸载container容器变化监听
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        this.echartsDisposed();
+        this.echartsIns = null; 
+        // 销毁dom
+        this.dom = null;
+    }
+    
+    // 销毁ECharts实例
+    echartsDisposed() {
+        if (this.echartsIns && !this.echartsIns.isDisposed()) {
+            this.echartsIns.dispose();
+        }
+    }
+}

package/src/components/charts/components/BarChart/barChartOption.js

@@ -0,0 +1,76 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+// 柱状图柱条响应式配置
+const BarChartOption = (width, option, type, stack) => {
+
+  // 计算柱子宽度
+  let barWidth;
+  // 定义默认列数
+  let columns = option.series.length;
+  // 包含柱状图/双向柱状图只有一个柱子
+  if (type === 'contain' || type === 'both-sides' || type === 'double-sides') {
+    columns = 1;
+  }
+  //堆叠柱状图的柱子需要另外判断
+  else if (type === 'stack') {
+    columns = stack ? Object.keys(stack).length : 1;
+  }
+  else if (type === 'range' || type === 'water-fall') {
+    columns = option.series.length / 2;
+  }
+
+  const rows = option.series[0]?.data?.length;
+  const intervalRows = rows;
+
+  // 柱子宽度为16px的初始间距 
+  const interval = (width - (rows * columns * 16 + rows * 4 * (columns - 1))) / intervalRows
+
+  if (interval >= 16) {
+    barWidth = 16;
+  }
+  else {
+    const flag = (width - intervalRows * 16 - rows * 4 * (columns - 1)) / (rows * columns)
+    barWidth = flag > 2 ? flag : 2
+  }
+
+  // 不同系列柱子之间的距离
+  let barGap;
+  if (type === 'contain') {
+    barGap = `-100%`;
+  }
+  // 柱间距离规范是4px
+  else {
+    barGap = `${4 / barWidth * 100}%`
+  }
+
+  option.series.forEach(item => {
+    Object.assign(item, {
+      barWidth,
+      barGap
+    });
+  });
+};
+
+// 动态计算柱条宽度更新配置项
+const updateWidth = (baseOption, chartInstance, iChartOption) => {
+  let width;
+  if (chartInstance.getModel()) {
+    if (iChartOption.direction === 'horizontal') {
+      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().height;
+    } else {
+      width = chartInstance.getModel().getComponent('grid').coordinateSystem.getRect().width;
+    }
+    BarChartOption(width, baseOption, iChartOption.type, iChartOption.stack);
+  }
+}
+
+export default updateWidth;

package/src/components/charts/components/BarChart/chartToken.js

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2024 - present OpenTiny HUICharts Authors.
+ * Copyright (c) 2024 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import Token from '../../feature/token';
+import {CHART_TYPE} from '../../util/constants'
+
+const chartToken = Token.getTokenByName(CHART_TYPE.BAR)
+
+export default chartToken;