@cgeui/utils 0.0.2 → 0.0.3

package/dist/lib/charts/chartTheme/defaultChart.js

@@ -0,0 +1,498 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.defaultPieChartTheme = exports.defaultChartTheme = void 0;
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+var legend = {
+  itemWidth: 8,
+  itemHeight: 8,
+  textStyle: {
+    color: "#000"
+  },
+  itemStyle: {
+    opacity: 0.85
+  },
+  icon: "diamond",
+  right: 0,
+  pageIconSize: 10,
+  // 翻页按钮大小
+  pageIconColor: "rgba(0,0,0, 0.7)",
+  // 可以翻页
+  pageIconInactiveColor: "rgba(0,0,0, 0.3)",
+  // 不能翻页
+  pageTextStyle: {
+    color: "rgba(0, 0, 0, 0.85)"
+  }
+};
+var barBackground = {
+  showBackground: true,
+  backgroundStyle: {
+    color: "rgba(200, 198, 198, 0.2)"
+  }
+};
+var tooltip = {
+  trigger: "axis",
+  axisPointer: {
+    type: "shadow",
+    shadowStyle: {
+      color: "rgba(219, 232, 255, 0.4)"
+      // width: 40,
+    }
+  },
+  backgroundColor: "#fff",
+  borderColor: "#fff",
+  textStyle: {
+    color: "#000"
+  },
+  appendToBody: true,
+  confine: true,
+  className: "frosted-glass",
+  extraCssText: "max-height: 240px; max-width: 400px; overflow: auto;",
+  enterable: true,
+  pageTextStyle: {
+    color: "#000"
+  }
+};
+var colorArr = ["#00B42A", "#F4A547", "#525FDD", "#FFCB47", "#34A5E5", "#E67754", "#13BDCC", "#C85DB8", "#30C147", "#9251DE"];
+var defaultPieChartTheme = exports.defaultPieChartTheme = {
+  color: colorArr,
+  backgroundColor: "transparent",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#444"
+    },
+    subtextStyle: {
+      color: "#888"
+    }
+  },
+  legend: {
+    itemWidth: 6,
+    itemHeight: 6,
+    textStyle: {
+      color: "#000"
+    },
+    itemStyle: {
+      opacity: 0.85
+    },
+    icon: "circle",
+    right: 0,
+    pageIconSize: 10,
+    // 翻页按钮大小
+    pageIconColor: "rgba(0,0,0, 0.7)",
+    // 可以翻页
+    pageIconInactiveColor: "rgba(0,0,0, 0.3)",
+    // 不能翻页
+    pageTextStyle: {
+      color: "rgba(0, 0, 0, 0.85)"
+    }
+  },
+  tooltip: tooltip
+};
+var defaultChartTheme = exports.defaultChartTheme = {
+  color: colorArr,
+  backgroundColor: "transparent",
+  textStyle: {},
+  title: {
+    textStyle: {
+      color: "#444"
+    },
+    subtextStyle: {
+      color: "#888"
+    }
+  },
+  line: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle"
+    // smooth: true,
+  },
+  radar: {
+    itemStyle: {
+      borderWidth: 1
+    },
+    lineStyle: {
+      width: 2
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false
+  },
+  bar: _objectSpread(_objectSpread({}, barBackground), {}, {
+    barWidth: 16,
+    itemStyle: {
+      barBorderWidth: 0,
+      barBorderColor: "#ccc"
+    },
+    label: {
+      color: "#444",
+      fontWeight: 500,
+      fontSize: 14
+    }
+  }),
+  pie: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#fff"
+    }
+  },
+  scatter: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  boxplot: {},
+  parallel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  sankey: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  funnel: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  gauge: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    }
+  },
+  candlestick: {
+    itemStyle: {
+      color: "#c12e34",
+      color0: "#2b821d",
+      borderColor: "#c12e34",
+      borderColor0: "#2b821d",
+      borderWidth: 1
+    }
+  },
+  graph: {
+    itemStyle: {
+      borderWidth: 0,
+      borderColor: "#ccc"
+    },
+    lineStyle: {
+      width: 1,
+      color: "#aaaaaa"
+    },
+    symbolSize: 4,
+    symbol: "emptyCircle",
+    smooth: false,
+    color: ["#c12e34", "#e6b600", "#0098d9", "#2b821d", "#005eaa", "#339ca8", "#cda819", "#32a487"],
+    label: {
+      color: "#eeeeee"
+    }
+  },
+  map: {
+    itemStyle: {
+      areaColor: "#ddd",
+      borderColor: "#eee",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#c12e34"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "#e6b600",
+        borderColor: "#ddd",
+        borderWidth: 1
+      },
+      label: {
+        color: "#c12e34"
+      }
+    }
+  },
+  geo: {
+    itemStyle: {
+      areaColor: "#ddd",
+      borderColor: "#eee",
+      borderWidth: 0.5
+    },
+    label: {
+      color: "#c12e34"
+    },
+    emphasis: {
+      itemStyle: {
+        areaColor: "#e6b600",
+        borderColor: "#ddd",
+        borderWidth: 1
+      },
+      label: {
+        color: "#c12e34"
+      }
+    }
+  },
+  categoryAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        type: "solid",
+        color: "#DBDFE6",
+        width: 1.5
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#DBDFE6"
+      }
+    },
+    nameTextStyle: {
+      color: "#444",
+      opacity: 0.85
+    },
+    axisLabel: {
+      show: true,
+      color: "#444",
+      hideOverlap: true
+    },
+    splitLine: {
+      show: false
+    },
+    splitArea: {
+      show: false
+    }
+  },
+  valueAxis: {
+    scale: true,
+    axisLine: {
+      show: false,
+      lineStyle: {
+        type: "solid",
+        color: "#DBDFE6",
+        width: 1.5
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#DBDFE6"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "#888",
+      hideOverlap: true
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: ["#DBDFE6"]
+      }
+    },
+    splitArea: {
+      show: false
+    },
+    nameTextStyle: {
+      color: "#444",
+      opacity: 0.85
+    }
+  },
+  timeAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        type: "solid",
+        color: "#DBDFE6",
+        width: 1.5
+      }
+    },
+    axisTick: {
+      show: false,
+      lineStyle: {
+        color: "#DBDFE6"
+      }
+    },
+    nameTextStyle: {
+      color: "#444",
+      opacity: 0.85
+    },
+    axisLabel: {
+      show: true,
+      color: "#444",
+      formatter: {
+        year: "{yyyy}",
+        month: "{MMM}",
+        day: "{d}",
+        hour: "{HH}:{mm}",
+        minute: "{HH}:{mm}",
+        second: "{HH}:{mm}:{ss}"
+      },
+      hideOverlap: true
+    },
+    splitLine: {
+      show: false
+    },
+    splitArea: {
+      show: false
+    }
+  },
+  logAxis: {
+    axisLine: {
+      show: true,
+      lineStyle: {
+        color: "#DBDFE6"
+      }
+    },
+    axisTick: {
+      show: true,
+      lineStyle: {
+        color: "#DBDFE6"
+      }
+    },
+    axisLabel: {
+      show: true,
+      color: "#333"
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: ["#DBDFE6"]
+      }
+    },
+    splitArea: {
+      show: false,
+      areaStyle: {
+        color: ["rgba(250,250,250,0.3)", "rgba(200,200,200,0.3)"]
+      }
+    }
+  },
+  toolbox: {
+    iconStyle: {
+      borderColor: "#06467c"
+    },
+    emphasis: {
+      iconStyle: {
+        borderColor: "#4187c2"
+      }
+    }
+  },
+  legend: legend,
+  tooltip: tooltip,
+  timeline: {
+    lineStyle: {
+      color: "#005eaa",
+      width: 1
+    },
+    itemStyle: {
+      color: "#005eaa",
+      borderWidth: 1
+    },
+    controlStyle: {
+      color: "#005eaa",
+      borderColor: "#005eaa",
+      borderWidth: 0.5
+    },
+    checkpointStyle: {
+      color: "#005eaa",
+      borderColor: "#316bc2"
+    },
+    label: {
+      color: "#005eaa"
+    },
+    emphasis: {
+      itemStyle: {
+        color: "#005eaa"
+      },
+      controlStyle: {
+        color: "#005eaa",
+        borderColor: "#005eaa",
+        borderWidth: 0.5
+      },
+      label: {
+        color: "#005eaa"
+      }
+    }
+  },
+  visualMap: {
+    color: ["#1790cf", "#a2d4e6"],
+    textStyle: {
+      color: "#333333"
+    }
+  },
+  dataZoom: {
+    backgroundColor: "rgba(47,69,84,0)",
+    dataBackgroundColor: "rgba(47,69,84,0.3)",
+    fillerColor: "rgba(167,183,204,0.4)",
+    handleColor: "#a7b7cc",
+    handleSize: "100%",
+    textStyle: {
+      color: "#333333"
+    }
+  },
+  markPoint: {
+    label: {
+      color: "#eeeeee"
+    },
+    emphasis: {
+      label: {
+        color: "#eeeeee"
+      }
+    }
+  },
+  categoryAxis3D: {
+    axisLabel: {
+      color: "#444",
+      hideOverlap: true
+    },
+    axisLine: {
+      lineStyle: {
+        type: "solid",
+        color: "#DBDFE6",
+        width: 1.5
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: "#DBDFE6"
+      }
+    }
+  },
+  valueAxis3D: {
+    axisLabel: {
+      color: "#444",
+      hideOverlap: true
+    },
+    axisLine: {
+      lineStyle: {
+        type: "solid",
+        color: "#DBDFE6",
+        width: 1.5
+      }
+    },
+    splitLine: {
+      show: true,
+      lineStyle: {
+        type: "dashed",
+        color: "#DBDFE6"
+      }
+    }
+  }
+};

package/dist/lib/charts/chartTheme/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _colorUtil = require("./colorUtil");
+Object.keys(_colorUtil).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _colorUtil[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _colorUtil[key];
+    }
+  });
+});
+var _darkChart = require("./darkChart");
+Object.keys(_darkChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _darkChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _darkChart[key];
+    }
+  });
+});
+var _defaultChart = require("./defaultChart");
+Object.keys(_defaultChart).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _defaultChart[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _defaultChart[key];
+    }
+  });
+});
+var _themeColor = require("./themeColor");
+Object.keys(_themeColor).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _themeColor[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _themeColor[key];
+    }
+  });
+});

package/dist/lib/charts/chartTheme/themeColor.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.themeColor = void 0;
+/**
+ * 自定义主题
+ */
+// All antd theme variables: https://github.com/ant-design/ant-design/blob/master/components/style/themes/default.less
+var themeColor = exports.themeColor = {
+  '@no-bg': 'transparent',
+  '@light': '#fff',
+  '@dark': '#000',
+  '@heading-color': 'fade(@light, 85)',
+  '@text-color': 'fade(@light, 65)',
+  '@text-color-secondary': 'fade(@light, 45)',
+  '@disabled-color': 'fade(@light, 25)',
+  '@primary-5': '#40a9ff',
+  '@primary-color': '#1890ff',
+  '@outline-color': '@primary-color',
+  //icon
+  '@icon-color': 'fade(@light, 65)',
+  '@icon-color-hover': 'fade(@light, 85)',
+  '@primary-6': '#096dd9',
+  //border
+  // Border color
+  '@border-color-base': '@white-2',
+  // base border outline a component
+  '@border-color-split': '@white-2',
+  // split border inside a component
+  '@border-color-inverse': '@white',
+  '@border-width-base': '1px',
+  // width of the border for a component
+  '@border-style-base': 'solid',
+  // style of a components border
+
+  // vertical margins
+  '@margin-lg': '20px',
+  // containers
+  '@margin-md': '16px',
+  // small containers and buttons
+  '@margin-sm': '12px',
+  // Form controls and items
+  '@margin-xs': '8px',
+  // small items
+  '@margin-xss': '4px',
+  // more small
+
+  //btn
+  '@btn-default-color': '@heading-color',
+  '@btn-default-bg': '#444457',
+  '@btn-default-border': '#444457',
+  '@btn-ghost-color': 'fade(@light, 45)',
+  '@btn-ghost-border': 'fade(@light, 45)',
+  //input
+  '@input-color': '@text-color',
+  '@input-bg': '@no-bg',
+  '@input-disabled-bg': '#4c4c61',
+  '@input-placeholder-color': '@text-color-secondary',
+  '@input-hover-border-color': 'fade(@light, 10)',
+  '@checkbox-check-color': '#3b3b4d',
+  '@checkbox-color': '@primary-color',
+  '@select-border-color': '#3b3b4d',
+  //bg
+  bg1: '#03091D',
+  bg2: '#0B1227',
+  bg3: '#121C3A',
+  '@background-color-base': '@bg1',
+  '@background-color-light': '@bg2',
+  '@item-active-bg': '#272733',
+  '@menu-dark-bg': '#001529',
+  '@body-background': '@background-color-base',
+  '@component-background': '@background-color-light',
+  '@tooltip-bg': '#191922',
+  '@tooltip-arrow-color': '#191922',
+  '@popover-bg': '#2d2d3b',
+  // Layout
+  '@layout-header-background': '@background-color-light',
+  '@layout-body-background': '@body-background',
+  '@page-header-back-color': '@background-color-base',
+  '@success-color': '#00a854',
+  '@info-color': '@primary-color',
+  '@warning-color': '#ffbf00',
+  '@error-color': '#f04134',
+  '@menu-bg': '#30303d',
+  '@menu-item-active-bg': 'fade(@light, 5)',
+  '@menu-highlight-color': '@light',
+  //table
+  '@table-bg': '@background-color-base',
+  '@table-header-bg': '@background-color-base',
+  '@table-filter-dropdown-bg': '@bg3',
+  // '@table-header-filter-active-bg': '@blue',
+  //card
+  '@card-head-background': 'transparent',
+  '@card-background': '@component-background',
+  '@card-hover-border': '#383847',
+  '@card-actions-background': '#30303d',
+  '@tail-color': 'fade(@light, 10)',
+  '@radio-button-bg': 'transparent',
+  '@radio-button-checked-bg': 'transparent',
+  '@radio-dot-color': '@primary-color',
+  '@table-row-hover-bg': '#383847',
+  '@item-hover-bg': '#383847',
+  '@alert-text-color': 'fade(@dark, 65%)',
+  '@tabs-horizontal-padding': '12px 0',
+  // zIndex': 'notification > popover > tooltip
+  '@zindex-notification': '1063',
+  '@zindex-popover': '1061',
+  '@zindex-tooltip': '1060',
+  // width
+  '@anchor-border-width': '1px',
+  // margin
+  '@form-item-margin-bottom': '24px',
+  '@menu-item-vertical-margin': '0px',
+  '@menu-item-boundary-margin': '0px',
+  // size
+  '@font-size-base': '14px',
+  '@font-size-lg': '16px',
+  '@screen-xl': '1208px',
+  '@screen-lg': '1024px',
+  '@screen-md': '768px',
+  // 移动
+  '@screen-sm': '767.9px',
+  // 超小屏
+  '@screen-xs': '375px',
+  '@alert-message-color': '@popover-bg',
+  // 官网
+  '@site-text-color': '@text-color',
+  '@site-border-color-split': 'fade(@light, 5)',
+  '@site-heading-color': '@heading-color',
+  '@site-header-box-shadow': '0 0.3px 0.9px rgba(0, 0, 0, 0.12), 0 1.6px 3.6px rgba(0, 0, 0, 0.12)',
+  '@home-text-color': '@text-color',
+  // 自定义需要找设计师
+  '@gray-8': '@text-color',
+  '@skeleton-color': 'rgba(0,0,0,0.8)',
+  // pro
+  '@pro-header-box-shadow': '@site-header-box-shadow',
+  // 背景图片，新增
+  '@login-bg': "url('../assets/loginBgPng.jpg')",
+  // '@login-bg': `url('')`,  // 没有必须为空，js文件里引入
+  blue: '#0C6FF2',
+  'blue-1': 'rgba(12, 111, 242, 0.1)',
+  'blue-2': 'rgba(12, 111, 242, 0.3)',
+  'blue-3': 'rgba(12, 111, 242, 0.25)',
+  green: '#19D56B',
+  purple: '#871CD5',
+  orange: '#D89614',
+  red: '#E11D26',
+  darkBlue: '#0B1227',
+  darkBlue1: '#121C3A',
+  darkBlue2: '#03091D',
+  upper: '#2CCCDB',
+  normal: '#3888FF',
+  // 不能是白色了
+  lower: '#2CCCDB',
+  // 8BFFF8
+
+  'primary-color': '#0C6FF2',
+  grey: '#D8D8D8',
+  'grey-1': 'rgba(234, 234, 234, 0.12)',
+  white: '#FFFFFF',
+  'white-1': 'rgba(255, 255, 255, 0.65)',
+  'white-2': 'rgba(255, 255, 255, 0.08)',
+  'white-3': 'rgba(255, 255, 255, 0.4)',
+  'white-4': 'rgba(255, 255, 255, 0.85)',
+  'white-5': 'rgba(255, 255, 255, 0.2)',
+  'white-6': 'rgba(255, 255, 255, 0.25)',
+  'white-7': 'rgba(255, 255, 255, 0.45)',
+  'white-8': 'rgba(255, 255, 255, 0.12)',
+  'white-9': 'rgba(255, 255, 255, 0.5)',
+  '1DB35D': '#1DB35D',
+  D89614: '#D89614'
+};