sea-chart 0.0.47 → 0.0.48

package/dist/constants/index.js

@@ -198,6 +198,7 @@ export const LEGEND_DIRECTION = {
 export const MIRROR_COLUMN_LIST = [CellType.TEXT, CellType.NUMBER, CellType.CTIME, CellType.MTIME, CellType.DATE, CellType.COLLABORATOR, CellType.AUTO_NUMBER, CellType.FORMULA, CellType.GEOLOCATION, CellType.URL, CellType.SINGLE_SELECT, CellType.LINK, CellType.CREATOR, CellType.LAST_MODIFIER, CellType.DURATION, CellType.EMAIL];
 export const CHART_SUPPORT_FONT_WEIGHTS = [400, 700];
 export const DEFAULT_CHART_FONT_WEIGHT = CHART_SUPPORT_FONT_WEIGHTS[1];
+export const DAFAULT_TREND_CHART_TITLE_FONT_SIZE = 16;
 export const DEFAULT_CHART_TITLE_FONT_SIZE = 18;
 export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {

package/dist/model/trend.js

@@ -1,5 +1,5 @@
 import { getTableColumnByKey, isDateColumn } from 'dtable-utils';
-import { CHART_TYPE } from '../constants';
+import { CHART_TYPE, HORIZONTAL_ALIGN } from '../constants';
 import BaseModel from './base-model';
 class Trend extends BaseModel {
   constructor(options, table) {
@@ -19,6 +19,15 @@ class Trend extends BaseModel {
     this.summary_type = options.y_axis_summary_type || 'count';
     this.summary_column_key = options.y_axis_summary_column_key;
     this.summary_method = options.y_axis_summary_method;
+    this.num_font_size = options.num_font_size || 34;
+    this.num_font_color = options.num_font_color || '#212529';
+    this.num_text_align = options.num_text_align || HORIZONTAL_ALIGN.LEFT;
+    this.num_font_weight = options.num_font_weight || 700;
+    this.label = options.label || '';
+    this.card_label_font_size = options.card_label_font_size || 14;
+    this.label_font_color = options.label_font_color || '#999999';
+    this.label_text_align = options.label_text_align || HORIZONTAL_ALIGN.LEFT;
+    this.label_font_weight = options.label_font_weight || 400;
   }
 }
 export default Trend;

package/dist/settings/index.js

@@ -2,10 +2,10 @@ import React, { useCallback, useMemo, useState, useEffect } from 'react';
 import classnames from 'classnames';
 import { eventStopPropagation } from '../utils';
 import { BaseUtils } from '../utils';
-import DataSettings from './data-settings';
-import StyleSettings from './style-settings';
 import { CHART_SETTINGS_TYPE, CHART_SETTINGS } from '../constants';
 import intl from '../intl';
+import DataSettings from './data-settings';
+import StyleSettings from './style-settings';
 import Divider from './widgets/divider';
 import './index.css';
 const Settings = _ref => {

package/dist/settings/style-settings.js

@@ -12,6 +12,7 @@ import { HeatMapStyleSettings } from './heat-map-settings';
 import StatisticTitleSetting from './widgets/title-settings';
 import { CompletenessStyleSettings } from './completeness-settings';
 import { MapStyleSettings } from './map-settings';
+import { TrendStyleSettings } from './trend-settings';
 const StyleSettings = _ref => {
   let {
     chart,
@@ -44,12 +45,17 @@ const StyleSettings = _ref => {
   }, [chart, onChange]);
   const renderTitleSettings = useCallback(() => {
     const {
-      style_config
+      style_config,
+      config
     } = chart;
+    const {
+      type
+    } = config;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StatisticTitleSetting, {
       key: "title-setting-".concat(chart.id),
       title: style_config && style_config.title,
-      modifyTitle: modifyTitle
+      modifyTitle: modifyTitle,
+      type: type
     }), /*#__PURE__*/React.createElement(Divider, null));
   }, [chart, modifyTitle]);
   const renderStatisticStyleSettings = useCallback(() => {
@@ -121,6 +127,10 @@ const StyleSettings = _ref => {
         {
           return /*#__PURE__*/React.createElement(HeatMapStyleSettings, props);
         }
+      case CHART_TYPE.TREND:
+        {
+          return /*#__PURE__*/React.createElement(TrendStyleSettings, props);
+        }
       default:
         {
           return null;

package/dist/settings/trend-settings/general-font-setting.js

@@ -0,0 +1,72 @@
+import React, { useRef, useState } from 'react';
+import { FormGroup, Input, Label } from 'reactstrap';
+import intl from '../../intl';
+import { FontColorSettings, FontSizeSettings, FontWeightSettings } from '../widgets/font-settings';
+import TextHorizontalSettings from '../widgets/text-horizontal-settings';
+import { CHART_SUPPORT_FONT_WEIGHTS } from '../../constants';
+export default function GeneralFontSetting(_ref) {
+  let {
+    labelTitle,
+    config,
+    defaultConfig,
+    onChange
+  } = _ref;
+  const {
+    font_size,
+    font_color,
+    text_align,
+    label,
+    font_weight
+  } = config;
+  const {
+    font_size: defaultFontSize,
+    font_color: defaultFontColor,
+    text_align: defaultTextAlign,
+    font_weight: defaultFontWeight
+  } = defaultConfig;
+  const labelRef = useRef(null);
+  const [currentLabel, setCurrentLabel] = useState(label);
+  const handleLabelChange = e => {
+    setCurrentLabel(e.target.value);
+  };
+  const onSaveLabel = () => {
+    onChange('label', currentLabel);
+  };
+  const handleFontSizeChange = updatedFontSize => {
+    onChange('font_size', updatedFontSize);
+  };
+  const handleFontColorChange = updatedFontColor => {
+    onChange('font_color', updatedFontColor);
+  };
+  const handleTextAlignChange = value => {
+    onChange('text_align', value);
+  };
+  const handleFontWeightChange = value => {
+    onChange('font_weight', value);
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, labelTitle && /*#__PURE__*/React.createElement(FormGroup, {
+    className: "sea-chart-parameter-item"
+  }, /*#__PURE__*/React.createElement(Label, null, intl.get(labelTitle)), /*#__PURE__*/React.createElement(Input, {
+    ref: labelRef,
+    type: "text",
+    value: currentLabel,
+    onBlur: onSaveLabel,
+    onChange: handleLabelChange
+  })), /*#__PURE__*/React.createElement(FontSizeSettings, {
+    fontSize: font_size,
+    defaultFontSize: defaultFontSize,
+    modifyFontSize: handleFontSizeChange
+  }), /*#__PURE__*/React.createElement(FontWeightSettings, {
+    fontWeight: font_weight || defaultFontWeight,
+    supportFontWeights: CHART_SUPPORT_FONT_WEIGHTS,
+    modifyFontWeight: handleFontWeightChange
+  }), /*#__PURE__*/React.createElement(FontColorSettings, {
+    fontColor: font_color,
+    defaultFontColor: defaultFontColor,
+    modifyFontColor: handleFontColorChange
+  }), /*#__PURE__*/React.createElement(TextHorizontalSettings, {
+    value: text_align,
+    defaultValue: defaultTextAlign,
+    onChange: handleTextAlignChange
+  }));
+}

package/dist/settings/trend-settings/index.js

@@ -1,2 +1,3 @@
 import TrendDataSettings from './data-settings';
-export { TrendDataSettings };
+import TrendStyleSettings from './style-setting';
+export { TrendDataSettings, TrendStyleSettings };

package/dist/settings/trend-settings/style-setting.js

@@ -0,0 +1,72 @@
+import { Label } from 'reactstrap';
+import React from 'react';
+import intl from '../../intl';
+import Divider from '../widgets/divider';
+import GeneralFontSetting from './general-font-setting';
+export default function StyleSettings(_ref) {
+  let {
+    chart,
+    onChange
+  } = _ref;
+  const {
+    config
+  } = chart;
+  const {
+    num_font_size,
+    num_font_color,
+    num_text_align,
+    num_font_weight,
+    card_label_font_size: label_font_size,
+    label_font_color,
+    label_text_align,
+    label_font_weight
+  } = config;
+  const numConfig = {
+    font_size: num_font_size,
+    font_color: num_font_color,
+    text_align: num_text_align,
+    font_weight: num_font_weight
+  };
+  const defaultNumConfig = {
+    font_size: 34,
+    font_color: '#212529',
+    text_align: 'left',
+    font_weight: 700
+  };
+  const labelConfig = {
+    font_size: label_font_size,
+    font_color: label_font_color,
+    text_align: label_text_align,
+    font_weight: label_font_weight
+  };
+  const defaultLabelConfig = {
+    font_size: 14,
+    font_color: '#999999',
+    text_align: 'left',
+    font_weight: 400
+  };
+  const handleNumChange = (key, value) => {
+    key = "num_".concat(key);
+    onChange({
+      [key]: value
+    });
+  };
+  const handleLabelChange = (key, value) => {
+    key = "label_".concat(key);
+    if (key === 'label_font_size') {
+      key = 'card_label_font_size';
+    }
+    onChange({
+      [key]: value
+    });
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Label, null, intl.get('Number_settings')), /*#__PURE__*/React.createElement(GeneralFontSetting, {
+    config: numConfig,
+    defaultConfig: defaultNumConfig,
+    onChange: handleNumChange
+  }), /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Label, null, intl.get('Label_settings')), /*#__PURE__*/React.createElement(GeneralFontSetting, {
+    config: labelConfig,
+    defaultConfig: defaultLabelConfig,
+    onChange: handleLabelChange
+  }));
+}

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, 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, DEFAULT_CHART_TITLE_FONT_COLOR } from '../../../constants';
+import { DEFAULT_CHART_FONT_WEIGHT, DEFAULT_CHART_TITLE_FONT_SIZE, CHART_SUPPORT_FONT_WEIGHTS, HORIZONTAL_ALIGN, DEFAULT_CHART_TITLE_FONT_COLOR, DAFAULT_TREND_CHART_TITLE_FONT_SIZE, CHART_TYPE } from '../../../constants';
+import TitleText from './title-text';
 const TitleSetting = props => {
   const initialTitle = useMemo(() => {
     return props.title || {};
@@ -45,12 +45,18 @@ const TitleSetting = props => {
       font_color: updatedFontColor
     });
   };
+  const isTrend = props.type === CHART_TYPE.TREND;
+
+  // if no text then set trend default font size to 16
+  if (isTrend && !initialTitle.TitleText) {
+    initialTitle.font_size = DAFAULT_TREND_CHART_TITLE_FONT_SIZE;
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(TitleText, {
     text: initialTitle.text,
     modifyText: modifyText
   }), /*#__PURE__*/React.createElement(FontSizeSettings, {
     fontSize: initialTitle.font_size,
-    defaultFontSize: DEFAULT_CHART_TITLE_FONT_SIZE,
+    defaultFontSize: isTrend ? DAFAULT_TREND_CHART_TITLE_FONT_SIZE : DEFAULT_CHART_TITLE_FONT_SIZE,
     modifyFontSize: modifyFontSize
   }), /*#__PURE__*/React.createElement(FontWeightSettings, {
     fontWeight: initialTitle.font_weight || DEFAULT_CHART_FONT_WEIGHT,

package/dist/view/index.css

@@ -47,11 +47,28 @@
   bottom: 2%;
 }
 
+.sea-chart-formatter .sea-chart-container.plugin-number-card-trend {
+  bottom: 0 !important;
+  left: 0 !important;
+  right: 0 !important;
+  top: 0 !important;
+  display: flex;
+  align-items: center 
+}
+
+.sea-chart-formatter .sea-chart-trend-formatter-container {
+  padding: 20px;
+  border: 2px solid #e2e2e2;
+  border-radius: 6px;
+}
+
 .sea-chart-formatter .sea-chart-container.show-x-axis-label,
 .sea-chart-formatter .sea-chart-container.show-horizontal-axis-label {
   padding-bottom: 20px;
 }
 
+
+
 .sea-chart-formatter .sea-chart-container.show-y-axis-label,
 .sea-chart-formatter .sea-chart-container.show-y-axis-left-label,
 .sea-chart-formatter .sea-chart-container.show-vertical-axis-label {

package/dist/view/wrapper/chart-component.js

@@ -544,7 +544,7 @@ export default class ChartComponent extends Component {
         showMarkers: true,
         marker: {
           strokeOpacity: 0,
-          r: 6
+          r: 5
         },
         crosshairs: {
           line: {

package/dist/view/wrapper/combination.js

@@ -262,7 +262,7 @@ class Combination extends ChartComponent {
           duration: 1000,
           easing: 'easeLinear'
         }
-      }).shape('circle').size(4).style({
+      }).shape('circle').size(3).style({
         stroke: 0,
         fillOpacity: 1
       }).label(display_data ? 'value_right' : false, {
@@ -371,9 +371,9 @@ class Combination extends ChartComponent {
         //   fillOpacity: 0.3,
         // });
         point.style('name', name => {
-          let r = 4;
+          let r = 3;
           if (name === e.data.data.name) {
-            r = 8;
+            r = 5;
           }
           return {
             r,
@@ -391,7 +391,7 @@ class Combination extends ChartComponent {
         //   fillOpacity: 1,
         // });
         point.style('name', name => {
-          let r = 4;
+          let r = 3;
           return {
             r,
             stroke: 0,

package/dist/view/wrapper/line-group.js

@@ -99,7 +99,7 @@ class LineGroup extends ChartComponent {
             duration: 1000,
             easing: 'easeLinear'
           }
-        }).shape('circle').size(4).style({
+        }).shape('circle').size(3).style({
           stroke: 0,
           fillOpacity: 1
         });

package/dist/view/wrapper/line.js

@@ -99,7 +99,7 @@ class Line extends ChartComponent {
             duration: 1000,
             easing: 'easeLinear'
           }
-        }).shape('circle').size(4).style({
+        }).shape('circle').size(3).style({
           stroke: 0,
           fillOpacity: 1
         });

package/dist/view/wrapper/trend.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import classNames from 'classnames';
 import { Chart } from '../../utils/custom-g2';
 import { BaseUtils } from '../../utils';
 import intl from '../../intl';
@@ -25,16 +26,22 @@ class Trend extends Component {
         config
       } = chart;
       const {
-        summary_method
+        summary_method,
+        num_font_size,
+        num_font_color,
+        num_font_weight,
+        num_text_align,
+        card_label_font_size: label_font_size,
+        label_font_color,
+        label_text_align,
+        label_font_weight
       } = config;
       const latest = result && result.latest;
       const content = summary_method === CHART_SUMMARY_TYPE.Distinct_values ? latest : this.formatData(latest);
-      const fontSize = this.getFontSize(content);
-      let labelFontSize = fontSize - 32;
-      const labelContent = this.createLabelContent(result, labelFontSize);
+      const labelContent = this.createLabelContent(result, label_text_align, label_font_size, label_font_color, label_font_weight);
       this.chart.annotation().html({
-        position: ['50%', '50%'],
-        html: "\n        <div style=\"color:".concat(theme.cardColor, "; text-align: center;\">\n          <p class=\"text-content\" style=\"font-size: ").concat(fontSize, "px; margin: -8px 0 2px 0;\">").concat(content, "</p>\n          <p style=\"margin: 0;\">").concat(labelContent, "</p>\n        </div>\n      ")
+        container: this.container,
+        html: "\n        <div style=\"color:".concat(theme.cardColor, "; width: 100%; height: 100%; position: relative\">\n          <p class=\"text-content\" style=\" position:absolute; width: 100%; top: calc((100% - 22px)/2); transform: translateY(-50%); font-size: ").concat(num_font_size, "px; margin: -8px 0 2px 0; text-align: ").concat(num_text_align, "; font-weight:").concat(num_font_weight, "; color:").concat(num_font_color, "\">").concat(content, "</p>\n          <p class=\"label-content\" style=\"position:absolute; width: 100%; bottom: 0px; margin: 0;\">").concat(labelContent, "</p>\n        </div>\n      ")
       });
       this.chart.render();
     };
@@ -76,30 +83,7 @@ class Trend extends Component {
       }
       return content;
     };
-    this.getFontSize = content => {
-      let canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
-      const {
-        width
-      } = this.chart;
-      let font = context.font;
-      let initFontSize = 50;
-      const fontStyle = font.slice(font.indexOf('px'));
-      font = initFontSize + fontStyle;
-      context.font = font;
-      context.fontSize = initFontSize;
-      while (context.measureText(content).width >= width - 40) {
-        initFontSize -= 1;
-        context.font = initFontSize + fontStyle;
-        context.fontSize = initFontSize;
-      }
-      canvas = null;
-      if (initFontSize < 16) {
-        initFontSize = 16;
-      }
-      return initFontSize;
-    };
-    this.createLabelContent = (data, maxFontSize) => {
+    this.createLabelContent = (data, label_text_align, labelFontSize, labelFontColor, labelFontWeight) => {
       const {
         chart
       } = this.props;
@@ -130,26 +114,24 @@ class Trend extends Component {
         type,
         previous
       } = data || {};
-      let color = '#ff0000',
-        icon = 'dtable-icon-down';
+      let color = '#fa5757',
+        icon = '&darr;';
       if (type === 'up') {
-        color = '#008000';
-        icon = 'dtable-icon-up';
+        color = '#34aa95';
+        icon = '&uarr;';
       }
       let resultText = "".concat(Number.parseFloat(result * 100).toFixed(2), "%&#8226;").concat(conjunctions).concat(previous);
       if (!previous) {
         resultText = intl.get('Can_not_compare_with_{var}').replace('{var}', intl.get(conjunctions));
       }
-      let labelFontSize = this.getFontSize(resultText, maxFontSize);
-      labelFontSize = labelFontSize > 20 ? 20 : labelFontSize;
       if (!previous) {
         return "<span style='font-size: ".concat(labelFontSize, "px'>").concat(resultText, "</span>");
       }
       if (labelFontSize <= 12) {
         if (!result) return '';
-        return "<span style='font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        <i style='color: ").concat(color, "' class='dtable-font ").concat(icon, "'></i>\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) : '', "%</span>\n      </span>");
+        return "<span style='font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        <i \n        style='color: ").concat(color, "; \n        display: inline-block; \n        width: ").concat(1.5 * labelFontSize, "px; \n        height: ").concat(1.5 * labelFontSize, "px; \n        line-height: ").concat(1.5 * labelFontSize, "px;  \n        border-radius: 50%; \n        background-color: ").concat(color, "26;\n        text-align: center;\n        margin-right: 8px;\n        font-weight: bold;\n        '>\n          ").concat(icon, "\n        </i>\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) : '', "%</span>\n      </span>");
       }
-      const resultContent = "\n      <span style='display: block; word-break: keep-all; font-size: ".concat(labelFontSize, "px; width: 100%;'>\n        ").concat(!result ? '' : "<i style='color: ".concat(color, "' class='dtable-font ").concat(icon, "'></i>"), "\n        <span style='color: ").concat(color, "'>").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "</span>\n        ").concat(result ? '&#8226;' : '', "\n        ").concat(conjunctions, "\n        ").concat(this.formatData(previous), "\n      </span>\n    ");
+      const resultContent = "\n      <span style='display: flex; flex-wrap:wrap; justify-content:".concat(label_text_align, "; font-size: ").concat(labelFontSize, "px; width: 100%;'>\n        <span style=\"white-space:nowrap\"> ").concat(!result ? '' : "\n        <i \n        style='\n        flex-shrink:0;\n        flex-basis:auto;\n        color: ".concat(color, "; \n        display: inline-block; \n        width: ").concat(1.5 * labelFontSize, "px; \n        height: ").concat(1.5 * labelFontSize, "px; \n        line-height: ").concat(1.5 * labelFontSize, "px; \n        border-radius: 50%; \n        background-color: ").concat(color, "26;\n        text-align: center;\n        margin-right: 8px;\n        font-weight: bold;\n        '\n        >\n          ").concat(icon, "\n        </i>"), "<span style='color: ").concat(color, "; margin-right: 0px '>\n        ").concat(result ? Number.parseFloat(result * 100).toFixed(2) + '%' : '', "\n        </span></span><span style=\"color:").concat(labelFontColor, "; font-weight:").concat(labelFontWeight, "; white-space:nowrap; margin-left: 16px \">\n        ").concat(conjunctions, " \n        ").concat(this.formatData(previous), "\n        </span>\n      </span>\n    ");
       return resultContent;
     };
   }
@@ -160,9 +142,10 @@ class Trend extends Component {
     }
   }
   render() {
+    // const { chart } = this.props;
     return /*#__PURE__*/React.createElement("div", {
       ref: ref => this.container = ref,
-      className: "sea-chart-container plugin-number-card"
+      className: classNames('sea-chart-container', 'plugin-number-card-trend')
     });
   }
 }

package/package.json

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