sea-chart 1.1.80 → 1.1.82

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

@@ -5,6 +5,7 @@ import { getNumberDisplayString } from 'dtable-utils';
 import { debounce, maxBy } from 'lodash-es';
 import classNames from 'classnames';
 import { CellType } from 'dtable-utils';
+import dayjs from 'dayjs';
 import intl from '../../intl';
 import { sortDataByGroupSum } from '../../utils/column-utils';
 import { EMPTY_NAME, CHART_TYPE, CHART_SUMMARY_TYPE, DEFAULT_NUMBER_FORMAT_OBJECT, CHART_THEME_COLOR, CHART_STYLE_COLORS } from '../../constants';
@@ -94,6 +95,7 @@ class BarGroup extends ChartComponent {
       const newData = this.getChartGroupData(data);
       const column_groupby_column = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const isGroupByDate = [CellType.DATE, CellType.CTIME, CellType.MTIME].includes(column_groupby_column === null || column_groupby_column === void 0 ? void 0 : column_groupby_column.type);
       let singleBarWidth, singleBarRadius;
       // y-axis label width：6 + 10
       const chartWidth = this.chart.width - 6 - 10; // 10 is y-axis number width and 6 is gap between number and y axis line
@@ -171,7 +173,8 @@ class BarGroup extends ChartComponent {
         },
         position: type === CHART_TYPE.BAR_STACK ? 'middle' : ''
       }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
-        return this.colorMap[group_name] || CHART_STYLE_COLORS[0];
+        const groupName = isGroupByDate ? dayjs(group_name).format('YYYY-MM-DD') : group_name;
+        return this.colorMap[groupName] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

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

@@ -402,7 +402,6 @@ export default class ChartComponent extends Component {
         position: legendPosition,
         itemName: {
           style: {
-            // fill: theme.textColor,
             fill: theme.legendTextColor,
             fontSize: theme.legendFontSize
           },
@@ -454,7 +453,6 @@ export default class ChartComponent extends Component {
             ];
           },
           style: style => {
-            // fill legend with stroke color
             if (style.stroke) {
               style.fill = style.stroke;
             }

package/dist/view/wrapper/horizontal-bar-group.js

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { debounce, maxBy } from 'lodash-es';
 import classNames from 'classnames';
 import { CellType } from 'dtable-utils';
+import dayjs from 'dayjs';
 import { CHART_TYPE, EMPTY_NAME, CHART_THEME_COLOR, CHART_STYLE_COLORS } from '../../constants';
 import { BaseUtils, isFunction } from '../../utils';
 import intl from '../../intl';
@@ -85,6 +86,7 @@ class HorizontalBarGroup extends HorizontalComponent {
       const isGroup = type === CHART_TYPE.HORIZONTAL_GROUP_BAR;
       const groupByColumn = this.getColumn(tables, table_id, column_groupby_column_key);
       const useSingleSelectColumnColor = (groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type) === CellType.SINGLE_SELECT && color_theme === SUPPORT_SINGLE_SELECT_THEMES_OPTIONS.SINGLE_SELECT_COLUMN_COLORS;
+      const isGroupByDate = [CellType.DATE, CellType.CTIME, CellType.MTIME].includes(groupByColumn === null || groupByColumn === void 0 ? void 0 : groupByColumn.type);
       const newData = this.getChartGroupData(data);
       let singleBarWidth, singleBarRadius;
       // y-axis label width：(6 + 10)
@@ -127,7 +129,8 @@ class HorizontalBarGroup extends HorizontalComponent {
           ...this.labelStroke
         }
       }).position('name*value').size(singleBarWidth).color('group_name', group_name => {
-        return this.colorMap[group_name] || CHART_STYLE_COLORS[0];
+        const groupName = isGroupByDate ? dayjs(group_name).format('YYYY-MM-DD') : group_name;
+        return this.colorMap[groupName] || CHART_STYLE_COLORS[0];
       }).tooltip('name*value*group_name*raw_name', (name, value, group_name, raw_name) => {
         return {
           title: !name && typeof name !== 'number' ? intl.get(EMPTY_NAME) : name,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sea-chart",
-  "version": "1.1.80",
+  "version": "1.1.82",
   "main": "./dist/index.js",
   "dependencies": {
     "@antv/data-set": "0.11.8",
@@ -27,7 +27,7 @@
   },
   "peerDependencies": {
     "@antv/scale": "0.3.14",
-    "dtable-ui-component": "^6.0.14",
+    "dtable-ui-component": "^6.0.15",
     "dtable-utils": "~5.0.*",
     "prop-types": "15.8.1",
     "react": "^18.3.1",