sea-chart 0.0.42 → 0.0.43

package/dist/constants/index.js

@@ -198,7 +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 DEFAULT_CHART_TITLE_FONT_SIZE = 24;
+export const DEFAULT_CHART_TITLE_FONT_SIZE = 18;
 export const DEFAULT_CHART_TITLE_FONT_COLOR = '#212529';
 export const CHART_SETTINGS_TYPE = {
   DATA: 'data',

package/dist/locale/lang/de.js

@@ -20,8 +20,8 @@ const de = {
   "By_city": "Nach Stadt",
   "By_district": "Nach Bezirk",
   "Row_count": "Anzahl der Zeilen",
-  "Left": "Linksbündig",
-  "Right": "Rechtsbündig",
+  "Left": "Links",
+  "Right": "Rechts",
   "Center": "Zentriert",
   "Top": "Oben",
   "Bottom": "Unten",

package/dist/locale/lang/fr.js

@@ -20,8 +20,8 @@ const fr = {
   "By_city": "Par ville",
   "By_district": "Par département",
   "Row_count": "Nombre de lignes",
-  "Left": "A gauche",
-  "Right": "A droite",
+  "Left": "À gauche",
+  "Right": "À droite",
   "Center": "Centre",
   "Top": "En haut",
   "Bottom": "En bas",

package/dist/locale/lang/zh_CN.js

@@ -140,8 +140,8 @@ const zh_CN = {
   "Done": "完成",
   "Internal_server_error": "服务端错误",
   "Network_error": "网络错误",
-  "There_are_some_problems_with_the_filters": "请先完成图表配置",
-  "Please_complete_the_chart_configuration_first": "过滤器有一些问题。",
+  "There_are_some_problems_with_the_filters": "过滤器有一些问题。",
+  "Please_complete_the_chart_configuration_first": "请先完成图表配置",
   "Not_used": "不使用",
   "Select_field": "选择字段",
   "Display_total": "显示总计",

package/dist/settings/widgets/select-table/index.js

@@ -32,7 +32,7 @@ class SelectTable extends React.Component {
   render() {
     return /*#__PURE__*/React.createElement(FormGroup, {
       className: "sea-chart-setting-item table-setting"
-    }, /*#__PURE__*/React.createElement(Label, null, intl.get('Table')), this.renderSelector());
+    }, /*#__PURE__*/React.createElement(Label, null, intl.lang === 'zh-cn' ? '子表' : intl.get('Table')), this.renderSelector());
   }
 }
 export default SelectTable;

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

@@ -383,24 +383,27 @@ export default class ChartComponent extends Component {
             }
           }
         },
-        itemSpacing: 28,
+        itemHeight: 30,
         marker: {
           symbol:
+          // 'square',
           // use cavans to custom legend，returns a path command array
           (x, y) => {
+            x = x + 6;
+            y = y - 1;
             // The total width of the capsule is 20px, and its height is 6px. Thus, the radius of the semi-circle is half the height, which is 3px.
             const r = 3;
             // The width of the rectangular part in the middle of the capsule is the total width minus the diameters of the two semi-circles, which is 14px.
             const rectWidth = 14;
-            return [['M', x - rectWidth / 2 - 3, y - r - 1],
+            return [['M', x - rectWidth / 2, y - r],
             // Start from the left edge of the left semi-circle
-            ['L', x + rectWidth / 2 - 3, y - r - 1],
+            ['L', x + rectWidth / 2, y - r],
             // Draw the top line to the left edge of the right semi-circle
-            ['A', r, r, 0, 0, 1, x + rectWidth / 2 - 3, y + r - 1],
+            ['A', r, r, 0, 0, 1, x + rectWidth / 2, y + r],
             // Draw the right semi-circle
-            ['L', x - rectWidth / 2 - 3, y + r - 1],
+            ['L', x - rectWidth / 2, y + r],
             // Draw the bottom line back to the right edge of the left semi-circle
-            ['A', r, r, 0, 0, 1, x - rectWidth / 2 - 3, y - r - 1] // Draw the left semi-circle
+            ['A', r, r, 0, 0, 1, x - rectWidth / 2, y - r] // Draw the left semi-circle
             ];
           },
           style: style => {
@@ -409,7 +412,8 @@ export default class ChartComponent extends Component {
               style.fill = style.stroke;
             }
             return style;
-          }
+          },
+          spacing: 15
         }
       };
     };

package/dist/view/wrapper/combination.js

@@ -307,9 +307,16 @@ class Combination extends ChartComponent {
       this.chart.on('interval:mouseenter', e => {
         if (this.isInsideInterval) return;
         this.isInsideInterval = true;
-        point.style({
-          stroke: 0,
-          fillOpacity: 0.3
+        // point.style({
+        //   stroke: 0,
+        //   fillOpacity: 0.3,
+        // });
+        interval.style('name*value_left', (name, value) => {
+          const isHovered = value === e.data.data.value_left && name === e.data.data.name;
+          return {
+            fillOpacity: isHovered ? 1 : 0.3,
+            radius: [singleBarRadius, singleBarRadius, 0, 0]
+          };
         });
         interval.tooltip('name*value_left', (name, value) => {
           const {
@@ -335,9 +342,15 @@ class Combination extends ChartComponent {
       this.chart.on('interval:mouseleave', e => {
         if (!this.isInsideInterval) return;
         this.isInsideInterval = false;
-        point.style({
-          stroke: 0,
-          fillOpacity: 1
+        // point.style({
+        //   stroke: 0,
+        //   fillOpacity: 1,
+        // });
+        interval.style('name*value_left', (name, value) => {
+          return {
+            fillOpacity: 1,
+            radius: [singleBarRadius, singleBarRadius, 0, 0]
+          };
         });
         interval.tooltip(false);
         point.tooltip('name*value_right', (name, value) => {
@@ -353,10 +366,10 @@ class Combination extends ChartComponent {
       this.chart.on('point:mouseenter', throttle(e => {
         if (this.isInsidePoint) return;
         this.isInsidePoint = true;
-        interval.style({
-          radius: [singleBarRadius, singleBarRadius, 0, 0],
-          fillOpacity: 0.3
-        });
+        // interval.style({
+        //   radius: [singleBarRadius, singleBarRadius, 0, 0],
+        //   fillOpacity: 0.3,
+        // });
         point.style('name', name => {
           let r = 4;
           if (name === e.data.data.name) {
@@ -373,10 +386,10 @@ class Combination extends ChartComponent {
       this.chart.on('point:mouseleave', throttle(e => {
         if (!this.isInsidePoint) return;
         this.isInsidePoint = false;
-        interval.style({
-          radius: [singleBarRadius, singleBarRadius, 0, 0],
-          fillOpacity: 1
-        });
+        // interval.style({
+        //   radius: [singleBarRadius, singleBarRadius, 0, 0],
+        //   fillOpacity: 1,
+        // });
         point.style('name', name => {
           let r = 4;
           return {
@@ -387,17 +400,6 @@ class Combination extends ChartComponent {
         });
         this.chart.render(true);
       }, 100));
-      this.chart.interaction('element-highlight-by-x', {
-        start: [{
-          trigger: 'element:mouseenter',
-          action: 'element-highlight-by-x:highlight'
-        }],
-        end: [{
-          trigger: 'element:mouseleave',
-          action: 'element-highlight-by-x:reset'
-        }]
-      });
-      // this.chart.interaction('custom-highlight-by-x');
       isFunction(customRender) && customRender(this.chart);
       this.chart.removeInteraction('legend-filter');
       this.chart.render();

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

@@ -104,30 +104,33 @@ class LineGroup extends ChartComponent {
           fillOpacity: 1
         });
       }
-      this.chart.on('tooltip:show', () => {
-        if (line.styleOption.cfg.opacity === 0.3) return;
-        line.style({
-          opacity: 0.3,
-          lineWidth: 3
-        });
-        if (point) point.style({
-          fillOpacity: 0.3,
-          stroke: 0
-        });
-        this.chart.render();
-      });
-      this.chart.on('tooltip:hide', () => {
-        if (line.styleOption.cfg.opacity === 1) return;
-        line.style({
-          opacity: 1,
-          lineWidth: 3
-        });
-        if (point) point.style({
-          fillOpacity: 1,
-          stroke: 0
-        });
-        this.chart.render();
-      });
+
+      // this.chart.on('tooltip:show', () => {
+      //   if (line.styleOption.cfg.opacity === 0.3) return;
+      //   line.style({
+      //     opacity: 0.3,
+      //     lineWidth: 3,
+      //   });
+      //   if (point) point.style({
+      //     fillOpacity: 0.3,
+      //     stroke: 0,
+      //   });
+      //   this.chart.render();
+      // });
+
+      // this.chart.on('tooltip:hide', () => {
+      //   if (line.styleOption.cfg.opacity === 1) return;
+      //   line.style({
+      //     opacity: 1,
+      //     lineWidth: 3,
+      //   });
+      //   if (point) point.style({
+      //     fillOpacity: 1,
+      //     stroke: 0,
+      //   });
+      //   this.chart.render();
+      // });
+
       this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/dist/view/wrapper/line.js

@@ -73,13 +73,15 @@ class Line extends ChartComponent {
           stroke: '#fff',
           lineWidth: 1
         }
-      }).animate({
-        appear: {
-          animation: 'fadeIn',
-          duration: 1000,
-          easing: 'easeLinear'
-        }
-      }).position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
+      })
+      // .animate({
+      //   appear: {
+      //     animation: 'fadeIn',
+      //     duration: 1000,
+      //     easing: 'easeLinear'
+      //   }
+      // })
+      .position('name*value').color(chartBarColor).shape(isSmooth ? 'smooth' : 'line').style({
         lineWidth: 3,
         opacity: 1
       }).tooltip('name*value', (name, value) => {
@@ -102,30 +104,32 @@ class Line extends ChartComponent {
           fillOpacity: 1
         });
       }
-      this.chart.on('tooltip:show', () => {
-        if (line.styleOption.cfg.opacity === 0.3) return;
-        line.style({
-          opacity: 0.3,
-          lineWidth: 3
-        });
-        if (point) point.style({
-          fillOpacity: 0.3,
-          stroke: 0
-        });
-        this.chart.render();
-      });
-      this.chart.on('tooltip:hide', () => {
-        if (line.styleOption.cfg.opacity === 1) return;
-        line.style({
-          opacity: 1,
-          lineWidth: 3
-        });
-        if (point) point.style({
-          fillOpacity: 1,
-          stroke: 0
-        });
-        this.chart.render();
-      });
+
+      // this.chart.on('tooltip:show', () => {
+      //   if (line.styleOption.cfg.opacity === 0.3) return;
+      //   line.style({
+      //     opacity: 0.3,
+      //     lineWidth: 3,
+      //   });
+      //   if (point) point.style({
+      //     fillOpacity: 0.3,
+      //     stroke: 0,
+      //   });
+      //   this.chart.render();
+      // });
+
+      // this.chart.on('tooltip:hide', () => {
+      //   if (line.styleOption.cfg.opacity === 1) return;
+      //   line.style({
+      //     opacity: 1,
+      //     lineWidth: 3,
+      //   });
+      //   if (point) point.style({
+      //     fillOpacity: 1,
+      //     stroke: 0,
+      //   });
+      //   this.chart.render();
+      // });
       this.setToolTipForLine();
       this.setNameLabelAndTooltip(theme, this.labelCount);
       this.setValueLabel(theme);

package/package.json

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