sea-chart 0.0.13 → 0.0.14

package/dist/components/color-picker/index.css

@@ -0,0 +1,64 @@
+.sea-chart-color-picker .color-select-container {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+}
+
+.sea-chart-color-picker .color-picker-container {
+  display: block;
+  width: 100%;
+  height: 2.375rem;
+  line-height: 2.375rem;
+  color: #495057;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid rgba(0, 40, 100, 0.12);
+  border-radius: 3px;
+  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+  position: relative;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+
+.sea-chart-color-picker .picker-control .color-control {
+  width: 24px;
+  height: 24px;
+  margin-left: 10px;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly,
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly .text-control {
+  background-color: #f7f7f7;
+}
+
+.sea-chart-color-picker .picker-control .color-control {
+  cursor: default;
+}
+
+.sea-chart-color-picker .picker-control .color-control.white-color {
+  border: 3px #eee solid;
+}
+
+.sea-chart-color-picker .picker-control .text-control {
+  height: 100%;
+  border: none;
+  outline: none;
+  padding-left: 10px;
+  font-size: 14px;
+}
+
+.sea-chart-color-picker .color-picker-container .picker-control.readOnly .text-control {
+  cursor: default;
+}

package/dist/components/color-picker/index.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { ChromePicker } from 'react-color';
+import './index.css';
+const COVER = {
+  top: '0px',
+  right: '0px',
+  bottom: '0px',
+  left: '0px'
+};
+class ColorPicker extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    this.onInputChanged = event => {
+      const value = event.target.value;
+      if (value === this.state.activeColor) return;
+      this.updateColor(value);
+      this.setState({
+        activeColor: value
+      });
+    };
+    this.onPickColorToggle = () => {
+      this.setState({
+        isShowColorPicker: !this.state.isShowColorPicker
+      });
+    };
+    this.onPickChanged = color => {
+      if (color.hex === this.state.activeColor) return;
+      this.updateColor(color.hex);
+      this.setState({
+        activeColor: color.hex
+      });
+    };
+    this.updateColor = color => {
+      this.props.onColorChanged(color);
+    };
+    this.getPopoverStyle = () => {
+      if (!this.colorPickerContainerRef) return {};
+      const {
+        top,
+        height
+      } = this.colorPickerContainerRef.getBoundingClientRect();
+      const {
+        clientHeight
+      } = document.body;
+      const selectTop = top + height;
+      if (clientHeight - selectTop < 247) {
+        // 247: ChromePicker's height
+        return {
+          position: 'absolute',
+          left: 0,
+          bottom: '2.375rem',
+          zIndex: '2'
+        };
+      }
+      return {
+        position: 'absolute',
+        left: 0,
+        zIndex: '2'
+      };
+    };
+    this.state = {
+      isShowColorPicker: false,
+      activeColor: props.activeColor
+    };
+    this.colorPickerContainerRef = null;
+  }
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      activeColor: nextProps.activeColor
+    });
+  }
+  render() {
+    const {
+      activeColor
+    } = this.state;
+    const isWhiteColor = activeColor && activeColor.toUpperCase() === '#FFFFFF';
+    return /*#__PURE__*/React.createElement("div", {
+      className: "color-picker-container",
+      ref: ref => this.colorPickerContainerRef = ref
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "picker-control"
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "color-control ".concat(isWhiteColor ? 'white-color' : ''),
+      onClick: this.onPickColorToggle,
+      style: {
+        background: activeColor
+      }
+    }), /*#__PURE__*/React.createElement("input", {
+      className: "text-control",
+      type: "text",
+      value: activeColor,
+      onChange: this.onInputChanged
+    })), this.state.isShowColorPicker && /*#__PURE__*/React.createElement("div", {
+      style: this.getPopoverStyle()
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "position-fixed",
+      style: COVER,
+      onClick: this.onPickColorToggle
+    }), /*#__PURE__*/React.createElement(ChromePicker, {
+      disableAlpha: true,
+      color: activeColor,
+      onChange: this.onPickChanged
+    })));
+  }
+}
+ColorPicker.defaultProps = {
+  activeColor: '#000000'
+};
+export default ColorPicker;

package/dist/constants/index.js

@@ -184,6 +184,7 @@ export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIM
 export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 24;
+export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {
   DATA: 'data',
   CHART_STYLE: 'style',

package/dist/locale/lang/en.js

@@ -90,6 +90,7 @@ const en = {
   '1 Filter': '1 filter',
   'Filters': 'filters',
   'Font_size': 'Font size',
+  'Font_color': 'Font color',
   'Font_weight': 'Font weight',
   'Chart_type': 'Chart type',
   "Histogram": "Histogram",

package/dist/locale/lang/zh_CN.js

@@ -90,6 +90,7 @@ const zh_CN = {
   "1 Filter": "1 个过滤条件",
   "Filters": "个过滤条件",
   "Font_size": "字体大小",
+  'Font_color': '字体颜色',
   "Font_weight": "字体粗细",
   'Chart_type': '图表类型',
   "Histogram": "柱状图",

package/dist/settings/widgets/font-settings/font-color-settings.js

@@ -0,0 +1,27 @@
+import React, { useMemo } from 'react';
+import classnames from 'classnames';
+import { FormGroup, Label } from 'reactstrap';
+import ColorPicker from '../../../components/color-picker';
+import intl from '../../../intl';
+const FontColorSettings = _ref => {
+  let {
+    fontColor,
+    defaultFontColor,
+    modifyFontColor,
+    className,
+    title
+  } = _ref;
+  const initialFontColor = useMemo(() => {
+    if (fontColor) return fontColor;
+    return defaultFontColor;
+  }, [defaultFontColor, fontColor]);
+  return /*#__PURE__*/React.createElement(FormGroup, {
+    className: classnames('sea-chart-setting-item', className)
+  }, /*#__PURE__*/React.createElement(Label, null, title || intl.get('Font_color')), /*#__PURE__*/React.createElement("div", {
+    className: "sea-chart-color-picker"
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    activeColor: initialFontColor,
+    onColorChanged: modifyFontColor
+  })));
+};
+export default FontColorSettings;

package/dist/settings/widgets/font-settings/index.js

@@ -1,3 +1,4 @@
 import FontSizeSettings from './font-size-settings';
 import FontWeightSettings from './font-weight-settings';
-export { FontSizeSettings, FontWeightSettings };
+import FontColorSettings from './font-color-settings';
+export { FontSizeSettings, FontWeightSettings, FontColorSettings };

package/dist/settings/widgets/title-settings/index.js

@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react';
 import TitleText from './title-text';
-import { FontSizeSettings, FontWeightSettings } from '../font-settings';
+import { FontSizeSettings, FontWeightSettings, FontColorSettings } from '../font-settings';
 import TextHorizontalSettings from '../text-horizontal-settings';
-import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN } from '../../../constants';
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR } from '../../../constants';
 const TitleSetting = props => {
   const initialTitle = useMemo(() => {
     return props.title || {};
@@ -40,6 +40,11 @@ const TitleSetting = props => {
       font_weight: updatedFontWeight
     });
   };
+  const modifyFontColor = updatedFontColor => {
+    modifyTitle({
+      font_color: updatedFontColor
+    });
+  };
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
     text: initialTitle.text,
     modifyText: modifyText
@@ -51,6 +56,10 @@ const TitleSetting = props => {
     fontWeight: initialTitle.font_weight || DEFAULT_CHART_FONT_WEIGHT,
     supportFontWeights: CHART_SUPPORT_FONT_WEIGHTS,
     modifyFontWeight: modifyFontWeight
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: initialTitle.font_color,
+    defaultFontColor: DEFAULT_CHART_TITLE_FONT_COLOR,
+    modifyFontColor: modifyFontColor
   }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
     value: initialTitle.horizontal_align,
     defaultValue: HORIZONTAL_ALIGN.LEFT,

package/dist/view/title/index.js

@@ -19,6 +19,7 @@ const Title = _ref => {
     const {
       font_size,
       font_weight,
+      font_color,
       horizontal_align
     } = chart.style_config.title;
     if (isNumber(font_size)) {
@@ -27,6 +28,9 @@ const Title = _ref => {
     if (CHART_SUPPORT_FONT_WEIGHTS.includes(font_weight)) {
       style.fontWeight = font_weight;
     }
+    if (font_color) {
+      style.color = font_color;
+    }
     style.textAlign = horizontal_align && HORIZONTAL_ALIGNS.includes(horizontal_align) ? horizontal_align : HORIZONTAL_ALIGN.LEFT;
     return style;
   }, [chart]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",