@ebiz/designer-components 0.0.18

package/src/components/charts/components/SnowFlakeChart/util.js

@@ -0,0 +1,430 @@
+/**
+ * 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 { opacity, singlecolor, singleWarnColor, singleMin2G, singleMin5G, singleMax, direction } from './CommonConstant';
+
+const setAttribute = (dom, attribute) => {
+  for (let i in attribute) {
+    if (Object.hasOwnProperty.call(attribute, i)) {
+      dom.setAttribute(i, attribute[i]);
+    }
+  }
+};
+
+const setStyle = (dom, styles) => {
+  for (let i in styles) {
+    if (Object.hasOwnProperty.call(styles, i)) {
+      dom.style[i] = styles[i];
+    }
+
+  }
+};
+
+const onImageLoad = (imageList, callback) => {
+  let onloadNum = 0;
+  const loadEvent = () => {
+    onloadNum++;
+    if (onloadNum === Object.keys(imageList).length) {
+      callback();
+    }
+  };
+
+  for (let item in imageList) {
+    if (Object.hasOwnProperty.call(imageList, item)) {
+      imageList[item]['image'].addEventListener('load', loadEvent);
+    }
+  }
+};
+
+const pxToNumber = pxText => {
+  return pxText.split('px')[0] - 0;
+};
+
+const pctToNumber = pctText => {
+  return pctText.split('%')[0] - 0;
+};
+
+const createDom = (type = 'div') => {
+  return document.createElement(type);
+};
+
+const insertDom = (container, attribute, styles, type) => {
+  const dom = createDom(type);
+  setAttribute(dom, attribute);
+  setStyle(dom, styles);
+  container.appendChild(dom);
+  return dom;
+};
+
+const getStyle = (dom, cssName) => {
+  return window.getComputedStyle(dom)[cssName];
+};
+
+const getCssNumber = (dom, cssName) => {
+  return pxToNumber(getStyle(dom, cssName));
+};
+
+// 将角度控制在0-360区间内
+const degPositive = angle => {
+  let deg;
+  if (angle >= 0 && angle <= 360) {
+    deg = angle;
+  } else if (angle > 360) {
+    deg = angle % 360;
+  } else {
+    deg = 360 + (angle % 360);
+  }
+  return deg;
+};
+
+// 提取一段字符串中的数值和小数点部分
+function extractNumbersAndDots(str) {
+  return str.match(/[\d.]+/g)[0];
+}
+
+// 获取文本的非数值部分
+const getUnitText = text => {
+  const valString = extractNumbersAndDots(text).toString();
+  const unit = text.slice(valString.length);
+  return unit;
+};
+
+// 补全默认值
+const setDefault = (userOption, defaultOption) => {
+  for (let key in defaultOption) {
+    if (userOption[key] === undefined || userOption[key] === null) {
+      userOption[key] = defaultOption[key];
+    }
+  }
+};
+
+// 判断两个数是否为倍数关系，是则存在角度重叠问题
+const isMultiple = (dividend, divisor) => {
+  if (dividend === 0 || divisor === 0) {
+    return false;
+  }
+  if (Math.max(dividend, divisor) % Math.min(dividend, divisor) === 0) {
+    return true;
+  }
+  return false;
+};
+
+// 判断某个值是否在区间内
+const judgeValue = (value, min, max) => {
+  let flag = true;
+  if (parseFloat(value) <= parseFloat(max) && parseFloat(value) >= parseFloat(min)) {
+    flag = true;
+  } else {
+    flag = false;
+  }
+  return flag;
+};
+
+const loopData = (data, newData) => {
+  data.forEach((item, index) => {
+    newData.push(item);
+    if (item.children && item.children.length) {
+      loopData(item.children, newData);
+    }
+  });
+};
+
+// 树形数组平铺
+const arrFlat = (data) => {
+  let newData = [];
+  loopData(data, newData);
+  return newData;
+};
+
+// 判断数据的disabled，给外层容器挂上类名
+const isDataDisabled = (data, container, option) => {
+  const disabledData = data.filter((item) => {
+    return item.disabled === true;
+  });
+  // overAll视图下，不展示disabled状态
+  if (disabledData.length && !option.overAll) {
+    container.classList.add('disabled');
+  } else {
+    container.classList.remove('disabled');
+  }
+};
+
+// 刷新node、line、tag，需要判断mac一致则更新
+const compareRefresh = (data, branchs, { centerArr, target }, that) => {
+  const flatData = arrFlat(data);
+  branchs.forEach((item) => {
+    flatData.forEach((dataItem) => {
+      item[centerArr].forEach((val) => {
+        if (val.data.mac === dataItem.mac) {
+          val.refreshData(dataItem);
+        }
+      });
+      item.leafsArr.forEach((val) => {
+        if (val.data.mac === dataItem.mac) {
+          val[target].refreshData(dataItem);
+        }
+      });
+    });
+  });
+  isDataDisabled(flatData, that.container, that.option);
+};
+
+// 遍历平铺数据，发现有没有disabled属性，有则设置透明度
+const judgeDisabled = (option, domArr, isLeaf, dataItem, isNode) => {
+  const { data, overAll } = option;
+  if (overAll) { // 全网视口不用置灰
+    return;
+  }
+  let hasDisabled = false;
+  let tagDisabled = false;
+  const flatData = arrFlat(data);
+  if (!isLeaf) {
+    if (!isNode) {
+      flatData.forEach((item) => {
+        if (item.disabled) { // 有一个disabled，非叶子节点tag、line全部置灰
+          hasDisabled = true;
+        }
+      });
+    } else {
+      if (dataItem.disabled) { // 非叶子节点的node是否置灰由自己决定
+        hasDisabled = true;
+      }
+    }
+  } else if (isLeaf) {
+    flatData.forEach((item) => {
+      if (item.disabled) { // 有一个disabled，叶子节点的tag、line全部置灰
+        tagDisabled = true;
+      }
+    });
+    if (dataItem.disabled) { // 叶子节点的node是否置灰由自己决定
+      hasDisabled = true;
+    }
+  }
+  domArr.forEach((item) => {
+    setStyle(item, {
+      opacity: hasDisabled ? opacity : 1
+    });
+  });
+  if (isLeaf && tagDisabled) { // 叶子节点需要置灰tag
+    setStyle(domArr[1], {
+      opacity: opacity
+    });
+  }
+};
+
+// 下钻/取消下钻，移动选中dom到视口中心
+const moveToCenter = ({ activeMac, leafTrigger, drag, chartContainer }, that, isNode) => {
+  if (activeMac && that.data.mac === activeMac) {
+    if (that.option.overAll) {
+      // 全网，使画布在视口中心(业务场景有可能需要将对应dom居中，待调整)
+      drag.moveTargetToCenter(chartContainer);
+    } else {
+      // 家庭，使点击的dom在视口中心(点击的是叶子节点，叶子节点居中，否则是叶子节点的外层容器居中)
+      if (isNode) {
+        drag.moveTargetToCenter(leafTrigger ? that.wrapper : that.wrapper.parentNode.parentNode);
+      } else {
+        drag.moveTargetToCenter(leafTrigger ? that.node.returnWrapper() : that.node.returnWrapper().parentNode.parentNode);
+      }
+    }
+  }
+};
+
+// 主网关信号强度判断
+const getRootTextColor = (data) => {
+  return judgeValue(data.rxPower, data.rxPowerMin, data.rxPowerMax) ? singlecolor : singleWarnColor;
+};
+
+// sta信号强度判断
+const getLeafTextColor = (data) => {
+  return judgeValue(data.signalStrength, data.connectInterface?.indexOf('2.4G') !== -1 ? singleMin2G : singleMin5G, singleMax) ? singlecolor : singleWarnColor;
+};
+
+// 从网关信号强度判断
+const getAPTextColor = (data) => {
+  let single;
+  let singleTextColor;
+  if (data.connectInterface?.indexOf('SSID') !== -1) {
+    single = data.signalStrength;
+    singleTextColor = getLeafTextColor(data);
+  } else {
+    single = data.rxPower;
+    singleTextColor = getRootTextColor(data);
+  }
+  return { single, singleTextColor };
+};
+
+
+
+// 根据设备类型获取信号强度字段和色值
+const getSingle = (data, type) => {
+  let single;
+  let singleTextColor;
+  switch (type) {
+    case 'root':
+      single = data.rxPower;
+      singleTextColor = getRootTextColor(data);
+      break;
+    case 'leaf':
+      single = data.signalStrength;
+      singleTextColor = getLeafTextColor(data);
+      break;
+    case 'ap':
+      single = getAPTextColor(data).single;
+      singleTextColor = getAPTextColor(data).singleTextColor;
+      break;
+  }
+  return { single, singleTextColor };
+};
+
+// 根据角度确定箭头/tag 朝向
+const setDirection = (deg) => {
+  let flag;
+  const { left, right } = direction;
+  if (deg >= 90 && deg < 270) {
+    flag = left;
+  } else {
+    flag = right;
+  }
+  return flag;
+};
+
+// 计算一段字符的像素长度
+const getTextWidth = (text, fontSize = 12) => {
+  let result = 0;
+  const ele = document.createElement('span');
+  // 字符串中带有换行符时，会被自动转换成<br/>标签，若需要考虑这种情况，可以替换成空格，以获取正确的宽度
+  ele.innerText = text;
+  // 不同的大小和不同的字体都会导致渲染出来的字符串宽度变化，可以传入尽可能完备的样式信息
+  ele.setAttribute('style', `font-size: ${fontSize}px`);
+  document.documentElement.append(ele);
+  result = ele.offsetWidth;
+  document.documentElement.removeChild(ele);
+  return result;
+};
+
+// 计算等腰三角形的弧长
+const getArcLength = (arc, r) => {
+  return arc / 360 * 2 * Math.PI * r;
+};
+
+// 计算等腰三角形的对边边长
+const getSideLength = (arc, r) => {
+  return Math.sin(arc / 2 / 180 * Math.PI) * r * 2;
+};
+
+// 计算等腰三角形的腰长
+const getWaistLength = (arc, sideLength) => {
+  return sideLength / 2 / Math.sin(arc / 2 / 180 * Math.PI);
+};
+
+// 弧度转角度
+function radiansToDegrees(radian) {
+  return (180 * radian / Math.PI);
+}
+
+// 计算等腰三角形的夹角
+const getTriangleAngle = (sideLength, r) => {
+  return radiansToDegrees(Math.asin(sideLength / 2 / r)) * 2;
+};
+
+// 获取两个dom的距离
+const getDistance = (dom1, dom2) => {
+  const { x: x1, y: y1, width: width1, height: height1 } = dom1.getBoundingClientRect();
+  const { x: x2, y: y2, width: width2, height: height2 } = dom2.getBoundingClientRect();
+  let center1 = {
+    x: x1 + width1 / 2,
+    y: y1 + height1 / 2
+  };
+  let center2 = {
+    x: x2 + width2 / 2,
+    y: y2 + height2 / 2
+  };
+  let distance = Math.sqrt(Math.pow((center2.x - center1.x), 2) + Math.pow((center2.y - center1.y), 2));
+  return distance;
+};
+
+// 获取指向类名的全部节点（传入Array类型）围成区间的大小范围
+const getAreaScope = (nodeArr) => {
+  const scope = {
+    left: nodeArr[0].getBoundingClientRect().left,
+    right: nodeArr[0].getBoundingClientRect().right,
+    top: nodeArr[0].getBoundingClientRect().top,
+    bottom: nodeArr[0].getBoundingClientRect().bottom
+  };
+  nodeArr.forEach((node) => {
+    const { left, right, top, bottom } = node.getBoundingClientRect();
+    if (left < scope.left) {
+      scope.left = left;
+    }
+    if (right > scope.right) {
+      scope.right = right;
+    }
+    if (top < scope.top) {
+      scope.top = top;
+    }
+    if (bottom > scope.bottom) {
+      scope.bottom = bottom;
+    }
+  });
+  return {
+    width: scope.right - scope.left,
+    height: scope.bottom - scope.top
+  };
+};
+
+// 悬浮提示框的边界判断
+const boundaryJudge = (e, container, toolTip) => {
+  const distance = 20;
+  let x = e.clientX + distance;
+  let y = e.clientY + distance;
+  const { width: containerWidth, height: containerHeight, x: containerLeft, y: containerTop } = container.getBoundingClientRect();
+  const { width: toolTipWidth, height: toolTipHeight } = toolTip.getBoundingClientRect();
+  if (x + toolTipWidth > containerLeft + containerWidth) { // 超过右边界
+    x = e.clientX - toolTipWidth - distance / 2;
+  }
+  if (y + toolTipHeight > containerTop + containerHeight) { // 超过下边界
+    y = e.clientY - toolTipHeight - distance / 2;
+  }
+  return { x, y };
+};
+
+export {
+  setAttribute,
+  setStyle,
+  onImageLoad,
+  pxToNumber,
+  createDom,
+  insertDom,
+  getStyle,
+  pctToNumber,
+  degPositive,
+  getUnitText,
+  setDefault,
+  isMultiple,
+  judgeValue,
+  arrFlat,
+  getTextWidth,
+  judgeDisabled,
+  isDataDisabled,
+  compareRefresh,
+  moveToCenter,
+  getSingle,
+  getArcLength,
+  setDirection,
+  getSideLength,
+  getTriangleAngle,
+  getWaistLength,
+  extractNumbersAndDots,
+  getDistance,
+  getAreaScope,
+  getCssNumber,
+  boundaryJudge
+};

package/src/components/charts/components/SunburstChart/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.SUNBURST)
+
+export default chartToken;

package/src/components/charts/components/SunburstChart/handleSeries.js

@@ -0,0 +1,48 @@
+/**
+ * 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 chartToken from './chartToken';
+
+export const seriesInit = {
+  center: ['50%', '50%'],
+  radius: ['12%', '70%'],
+  type: 'sunburst',
+  sort: undefined,
+  emphasis: {
+    focus: 'descendant',
+  },
+  itemStyle: {
+    borderRadius: 4,
+    borderWidth: 2,
+    borderColor: '',
+  },
+  data: [],
+  label: {
+    rotate: 0,
+    color: '',
+  },
+  levels: [],
+};
+
+/**
+ * 组装echarts所需要的series
+ * @param {传入数据} iChartOption
+ * @returns
+ */
+export function setSeries(iChartOption) {
+  const { data } = iChartOption;
+  const series = cloneDeep(seriesInit);
+  series.data = data;
+  series.itemStyle.borderColor = chartToken.itemBorderColor;
+  series.label.color = chartToken.labelColor;
+  return series;
+}

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

@@ -0,0 +1,41 @@
+/**
+ * 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 init from '../../option/init';
+import { setSeries } from './handleSeries';
+import merge from '../../util/merge';
+import PolarCoordSys from '../../option/PolarSys';
+import { CHART_TYPE } from '../../util/constants';
+
+export default class SunburstChart {
+
+    static name = CHART_TYPE.SUNBURST
+
+
+    constructor(iChartOption, chartInstance) {
+        this.baseOption = {};
+        this.iChartOption = {};
+        this.iChartOption = init(iChartOption);
+        this.updateOption(chartInstance);
+    }
+    updateOption(chartInstance) {
+        const iChartOption = this.iChartOption;
+        // 装载除series之外的其他配置
+        PolarCoordSys(this.baseOption, iChartOption, CHART_TYPE.SUNBURST);
+        this.baseOption.color = ['', ...iChartOption.color];
+        this.baseOption.series = setSeries(iChartOption);
+        // 合并用户自定义series
+        merge(this.baseOption.series, iChartOption.series);
+    }
+    getOption() {
+        return this.baseOption;
+    }
+}

package/src/components/charts/components/TerraceChart/defaultGradient.js

@@ -0,0 +1,116 @@
+/**
+ * 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 defaultGradient = [
+    {
+        type: 'health',
+        lineGradient: `<defs xmlns="http://www.w3.org/2000/svg" id='TerraceChart-health'>
+    <linearGradient x1="100%" y1="50%" x2="35.3012282%" y2="50%" id="TerraceChart-linearGradient-1">
+      <stop stop-color="#89FF11" offset="0%"></stop>
+      <stop stop-color="#60C723" stop-opacity="0.850259848" offset="28.9310055%"></stop>
+      <stop stop-color="#5CB300" stop-opacity="0.499907807" offset="50.3356507%"></stop>
+      <stop stop-color="#00F189" stop-opacity="0.746051068" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="100%" y1="50%" x2="14.0942888%" y2="50%" id="TerraceChart-linearGradient-2">
+        <stop stop-color="#89FF11" offset="0%"></stop>
+        <stop stop-color="#60C723" stop-opacity="0.849479622" offset="41.880873%"></stop>
+        <stop stop-color="#5CB300" stop-opacity="0.504496968" offset="73.3951595%"></stop>
+        <stop stop-color="#00F189" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="100%" y1="50%" x2="0%" y2="50%" id="TerraceChart-linearGradient-3">
+        <stop stop-color="#00F189" stop-opacity="0.495952046" offset="0%"></stop>
+        <stop stop-color="#5CB300" stop-opacity="0.845419717" offset="9.44454702%"></stop>
+        <stop stop-color="#50C291" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="TerraceChart-linearGradient-4">
+        <stop stop-color="#50C291" offset="0%"></stop>
+        <stop stop-color="#60C723" stop-opacity="0.84669676" offset="90.555453%"></stop>
+        <stop stop-color="#5CB300" stop-opacity="0.495400595" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="-1.11022302e-14%" y1="50%" x2="100%" y2="50%" id="TerraceChart-linearGradient-5">
+        <stop stop-color="#50C291" offset="0%"></stop>
+        <stop stop-color="#4FC723" stop-opacity="0.846898219" offset="90.555453%"></stop>
+        <stop stop-color="#5CB300" stop-opacity="0.500440477" offset="100%"></stop>
+    </linearGradient>
+        </defs>`
+    },
+    {
+        type: 'warning',
+        lineGradient: `<defs xmlns="http://www.w3.org/2000/svg" id='TerraceChart-warning'>
+    <linearGradient x1="52.2558921%" y1="6.75228859%" x2="52.5046901%" y2="93.2477114%" id="TerraceChart-linearGradient-1">
+        <stop stop-color="#FF8800" offset="0%"></stop>
+        <stop stop-color="#F8D314" offset="32.0358349%"></stop>
+        <stop stop-color="#F7D916" offset="82.1646487%"></stop>
+        <stop stop-color="#FF8800" stop-opacity="0.502542136" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="52.2558921%" y1="8.26855662%" x2="52.5046901%" y2="91.7314434%" id="TerraceChart-linearGradient-2">
+        <stop stop-color="#FF8800" offset="0%"></stop>
+        <stop stop-color="#F8D314" offset="32.0358349%"></stop>
+        <stop stop-color="#F7D916" offset="82.1646487%"></stop>
+        <stop stop-color="#FF8800" stop-opacity="0.502542136" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="52.2558921%" y1="9.37745847%" x2="52.5046901%" y2="90.6225415%" id="TerraceChart-linearGradient-3">
+        <stop stop-color="#FF8800" offset="0%"></stop>
+        <stop stop-color="#F8D314" offset="32.0358349%"></stop>
+        <stop stop-color="#F7D916" offset="82.1646487%"></stop>
+        <stop stop-color="#FF8800" stop-opacity="0.502542136" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="52.2558921%" y1="8.1035503%" x2="52.5046901%" y2="91.8964497%" id="TerraceChart-linearGradient-4">
+        <stop stop-color="#FF8800" offset="0%"></stop>
+        <stop stop-color="#F8D314" offset="32.0358349%"></stop>
+        <stop stop-color="#F7D916" offset="82.1646487%"></stop>
+        <stop stop-color="#FF8800" stop-opacity="0.502542136" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="52.2558921%" y1="6.8582716%" x2="52.5046901%" y2="93.1417284%" id="TerraceChart-linearGradient-5">
+        <stop stop-color="#FF8800" offset="0%"></stop>
+        <stop stop-color="#F8D314" offset="32.0358349%"></stop>
+        <stop stop-color="#F7D916" offset="82.1646487%"></stop>
+        <stop stop-color="#FF8800" stop-opacity="0.502542136" offset="100%"></stop>
+    </linearGradient>
+        </defs>`
+    },
+    {
+        type: 'risk',
+        lineGradient: `<defs xmlns="http://www.w3.org/2000/svg" id='TerraceChart-risk'>
+    <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="TerraceChart-linearGradient-1">
+        <stop stop-color="#F23030" stop-opacity="0.998394231" offset="0%"></stop>
+        <stop stop-color="#FF8800" offset="9.60287846%"></stop>
+        <stop stop-color="#FF4900" stop-opacity="0.500440477" offset="72.2909537%"></stop>
+        <stop stop-color="#FF1F00" stop-opacity="0.744471837" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="TerraceChart-linearGradient-2">
+        <stop stop-color="#F23030" stop-opacity="0.998394231" offset="0%"></stop>
+        <stop stop-color="#FF8800" offset="9.60287846%"></stop>
+        <stop stop-color="#FF4900" stop-opacity="0.500440477" offset="72.2909537%"></stop>
+        <stop stop-color="#FF1F00" stop-opacity="0.744471837" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="TerraceChart-linearGradient-3">
+        <stop stop-color="#F23030" stop-opacity="0.998394231" offset="0%"></stop>
+        <stop stop-color="#FF8800" offset="9.60287846%"></stop>
+        <stop stop-color="#FF4900" stop-opacity="0.500440477" offset="72.2909537%"></stop>
+        <stop stop-color="#FF1F00" stop-opacity="0.744471837" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="TerraceChart-linearGradient-4">
+        <stop stop-color="#F23030" stop-opacity="0.998394231" offset="0%"></stop>
+        <stop stop-color="#FF8800" offset="9.60287846%"></stop>
+        <stop stop-color="#FF4900" stop-opacity="0.500440477" offset="72.2909537%"></stop>
+        <stop stop-color="#FF1F00" stop-opacity="0.744471837" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="50%" y1="100%" x2="50%" y2="3.061617e-15%" id="TerraceChart-linearGradient-5">
+        <stop stop-color="#F23030" stop-opacity="0.998394231" offset="0%"></stop>
+        <stop stop-color="#FF8800" offset="9.60287846%"></stop>
+        <stop stop-color="#FF4900" stop-opacity="0.500440477" offset="72.2909537%"></stop>
+        <stop stop-color="#FF1F00" stop-opacity="0.744471837" offset="100%"></stop>
+    </linearGradient>
+        </defs>`
+    }
+];
+export default defaultGradient;