nhn · jwlee1108 · Sep 17, 2021 · Sep 12, 2021 · Sep 13, 2021 · Sep 13, 2021
diff --git a/apps/chart/src/charts/barChart.ts b/apps/chart/src/charts/barChart.ts
@@ -48,6 +48,7 @@ import { BarChartProps, SelectSeriesInfo } from '@t/charts';
  *     @param {Array<string>} props.data.categories - Categories.
  *     @param {Array<Object>} props.data.series - Series data.
  *       @param {string} props.data.series.name - Series name.
+ *       @param {string} props.data.series.colorByCategories - Paint Rect with color based on categories.
  *       @param {Array<number|Array<number>>} props.data.series.data - Series data.
  *   @param {Object} [props.options] - Options for making Bar Chart.
  *     @param {Object} [props.options.chart]
@@ -63,7 +64,6 @@ import { BarChartProps, SelectSeriesInfo } from '@t/charts';
  *       @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
  *       @param {number} [props.options.series.barWidth] - Bar width.
  *       @param {boolean} [props.options.series.diverging] - Whether to use diverging chart or not.
- *       @param {boolean} [props.options.series.colorByPoint] - Whether to use color feature or not.
  *       @param {Object} [props.options.series.stack] - Option to use the stack chart or, if so, what type of stack to use.
  *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.
  *       @param {Object} [props.options.series.dataLabels] - Set the visibility, location, and formatting of dataLabel. For specific information, refer to the {@link https://github.com/nhn/tui.chart|DataLabels guide} on github.

diff --git a/apps/chart/src/charts/columnChart.ts b/apps/chart/src/charts/columnChart.ts
@@ -47,6 +47,7 @@ import { ColumnChartProps, SelectSeriesInfo } from '@t/charts';
  *     @param {Array<string>} props.data.categories - Categories.
  *     @param {Array<Object>} props.data.series - Series data.
  *       @param {string} props.data.series.name - Series name.
+ *       @param {string} props.data.series.colorByCategories - Paint Rect with color based on categories.
  *       @param {Array<number|Array<number>>} props.data.series.data - Series data.
  *   @param {Object} [props.options] - Options for making Column Chart.
  *     @param {Object} [props.options.chart]
@@ -62,7 +63,6 @@ import { ColumnChartProps, SelectSeriesInfo } from '@t/charts';
  *       @param {boolean} [props.options.series.selectable=false] - Whether to make selectable series or not.
  *       @param {number} [props.options.series.barWidth] - Bar width.
  *       @param {boolean} [props.options.series.diverging] - Whether to use diverging chart or not.
- *       @param {boolean} [props.options.series.colorByPoint] - Whether to use color feature or not.
  *       @param {Object} [props.options.series.stack] - Option to use the stack chart or, if so, what type of stack to use.
  *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.
  *       @param {Object} [props.options.series.dataLabels] - Set the visibility, location, and formatting of dataLabel. For specific information, refer to the {@link https://github.com/nhn/tui.chart|DataLabels guide} on github.

diff --git a/apps/chart/src/component/boxSeries.ts b/apps/chart/src/component/boxSeries.ts
@@ -425,16 +425,20 @@ export default class BoxSeries extends Component {
     const seriesModels: RectModel[] = [];
     const padding = (tickDistance - columnWidth * (validDiverging ? 1 : seriesLength)) / 2;
 
-    seriesData.forEach(({ data, color: seriesColor, name }, seriesIndex) => {
+    seriesData.forEach(({ data, color: seriesColor, name, colorByCategories }, seriesIndex) => {
       const seriesPos = (diverging ? 0 : seriesIndex) * columnWidth + padding;
       const isLBSideWithDiverging = diverging && isLeftBottomSide(seriesIndex);
+      const colorLength = colorByCategories ? seriesColor.length : 1;
 
       this.isRangeData = isRangeData(data);
 
       data.forEach((value, index) => {
         const dataStart = seriesPos + index * tickDistance;
         const barLength = this.makeBarLength(value, renderOptions);
-        const color = this.getSeriesColor(name, seriesColor);
+        const color = this.getSeriesColor(
+          name,
+          colorByCategories ? seriesColor[index % colorLength] : (seriesColor as string)
+        );
 
         if (isNumber(barLength)) {
           const startPosition = this.getStartPosition(
@@ -534,15 +538,15 @@ export default class BoxSeries extends Component {
   ): TooltipData[] {
     const tooltipData: TooltipData[] = [];
 
-    seriesData.forEach(({ data, name, color }) => {
+    seriesData.forEach(({ data, name, color, colorByCategories }) => {
       data.forEach((value, dataIndex) => {
         if (!isNull(value)) {
           const barLength = this.makeBarLength(value, renderOptions);
 
           if (isNumber(barLength)) {
             tooltipData.push({
               label: name,
-              color,
+              color: colorByCategories ? color[dataIndex] : (color as string),
               value: this.getTooltipValue(value),
               category: categories.length ? categories[dataIndex] : '',
             });

diff --git a/apps/chart/src/component/boxStackSeries.ts b/apps/chart/src/component/boxStackSeries.ts
@@ -262,9 +262,11 @@ export default class BoxStackSeries extends BoxSeries {
           renderOptions,
           isLBSideWithDiverging
         );
-        const { name } = seriesRawData[seriesIndex];
+        const { name, colorByCategories, color: rawColor } = seriesRawData[seriesIndex];
         const active = this.activeSeriesMap![name];
-        const color = getRGBA(seriesRawData[seriesIndex].color, active ? 1 : 0.2);
+        const colorLength = rawColor.length || 1;
+        const hexColor = colorByCategories ? rawColor[dataIndex % colorLength] : rawColor as string;
+        const color = getRGBA(hexColor, active ? 1 : 0.2);
 
         seriesModels.push({
           type: 'rect',
@@ -378,7 +380,7 @@ export default class BoxStackSeries extends BoxSeries {
   ): TooltipData[] {
     const seriesRawData = seriesData.data;
     const { stackData } = seriesData;
-    const colors = seriesRawData.map(({ color }) => color);
+    const colors = seriesRawData.map(({ color }) => color) as string[];
 
     return isGroupStack(stackData)
       ? this.makeGroupStackTooltipData(seriesRawData, stackData, categories)
@@ -394,7 +396,7 @@ export default class BoxStackSeries extends BoxSeries {
       const rawDataWithSameGroupId = seriesRawData.filter(
         ({ stackGroup }) => stackGroup === groupId
       );
-      const colors = rawDataWithSameGroupId.map(({ color }) => color);
+      const colors = rawDataWithSameGroupId.map(({ color }) => color) as string[];
 
       return this.makeStackTooltipData(
         rawDataWithSameGroupId,

diff --git a/apps/chart/src/helpers/theme.ts b/apps/chart/src/helpers/theme.ts
@@ -333,7 +333,6 @@ function getBarColumnSeriesTheme(globalFontFamily: string) {
   const defaultDataLabelTheme = makeDefaultDataLabelsTheme(globalFontFamily);
 
   return {
-    colorByPoint: false,
     areaOpacity: 1,
     hover: {
       ...boxDefault.BOX_HOVER,

diff --git a/apps/chart/src/store/legend.ts b/apps/chart/src/store/legend.ts
@@ -7,6 +7,8 @@ import {
   Legend,
   CircleLegend,
   LegendDataList,
+  Categories,
+  DefaultCategories,
 } from '@t/store/store';
 import {
   BubbleChartOptions,
@@ -50,6 +52,8 @@ type LegendLabelsInfo = {
   checked: boolean;
   viewLabel: string;
   width: number;
+  colorByCategories?: boolean;
+  colorIndex?: number;
 }[];
 
 type LegendInfo = {
@@ -298,23 +302,37 @@ function getViewLabelInfo(legendInfo: LegendInfo, label: string, maxTextLength?:
   return { viewLabel, width: itemWidth ?? itemWidthWithFullText };
 }
 
-function getLegendLabelsInfo(series: RawSeries, legendInfo: LegendInfo): LegendLabelsInfo {
+function getLegendLabelsInfo(
+  series: RawSeries,
+  legendInfo: LegendInfo,
+  categories: DefaultCategories
+): LegendLabelsInfo {
   const maxTextLengthWithEllipsis = getMaxTextLengthWithEllipsis(legendInfo);
+  let colorIndex = 0;
 
-  return Object.keys(series).flatMap((type) =>
-    series[type].map(({ name, colorValue, visible }) => {
+  return Object.keys(series).flatMap((type) => {
+    const labelInfo = series[type].map(({ name, colorValue, visible, colorByCategories }) => {
       const label = colorValue ? colorValue : name;
+      const currentColorIndex = colorIndex;
       const { width, viewLabel } = getViewLabelInfo(legendInfo, label, maxTextLengthWithEllipsis);
 
+      colorIndex += colorByCategories ? categories.length : 1;
+
       return {
         label,
         type,
+        colorByCategories: !!colorByCategories,
+        colorIndex: currentColorIndex,
         checked: visible ?? true,
         viewLabel,
         width,
       };
-    })
-  );
+    });
+
+    colorIndex += series[type].length - 1;
+
+    return labelInfo;
+  });
 }
 
 function getItemWidth(
@@ -337,14 +355,20 @@ function getLegendDataAppliedTheme(data: LegendDataList, series: Series) {
     (acc, cur) => (cur && cur.colors ? [...acc, ...cur.colors] : acc),
     []
   );
+  const hasColorByCategories = data.some((legend) => legend.colorByCategories);
 
-  return data.map((datum, idx) => ({
-    ...datum,
-    color: colors[idx],
-  }));
+  return data.map((datum, idx) => {
+    const { colorByCategories, colorIndex } = datum;
+    const index = hasColorByCategories ? colorIndex || idx : idx;
-    const { colorByCategories, colorIndex } = datum;
-    const index = hasColorByCategories ? colorIndex || idx : idx;
+    const { colorByCategories, colorIndex = idx } = datum;
+    const index = hasColorByCategories ? colorIndex : idx;
-    const { colorByCategories, colorIndex } = datum;
-    const index = hasColorByCategories ? colorIndex || idx : idx;
+    const { colorByCategories, colorIndex = idx } = datum;
+    const index = hasColorByCategories ? colorIndex : idx;
+    
+    return {
+      ...datum,
+      color: colorByCategories ? '#aaa' : colors[index % colors.length],
+    };
+  });
 }
 
-function getLegendState(options: Options, series: RawSeries): Legend {
+function getLegendState(options: Options, series: RawSeries, categories?: Categories): Legend {
   const useSpectrumLegend =
     (options?.series as TreemapChartSeriesOptions)?.useColorValue ?? !!series.heatmap;
 
@@ -365,19 +389,23 @@ function getLegendState(options: Options, series: RawSeries): Legend {
 
   const legendLabelsInfo = hasNestedPieSeries(series)
     ? getNestedPieLegendLabelsInfo(series, legendInfo)
-    : getLegendLabelsInfo(series, legendInfo);
-
-  const data = legendLabelsInfo.map(({ label, type, checked, width, viewLabel }) => ({
-    label,
-    active: true,
-    checked,
-    width,
-    iconType: getIconType(type),
-    chartType: type,
-    rowIndex: 0,
-    columnIndex: 0,
-    viewLabel,
-  }));
+    : getLegendLabelsInfo(series, legendInfo, categories as DefaultCategories);
+
+  const data = legendLabelsInfo.map(
+    ({ label, type, checked, width, viewLabel, colorByCategories, colorIndex }) => ({
+      label,
+      active: true,
+      checked,
+      width,
+      iconType: getIconType(type),
+      chartType: type,
+      rowIndex: 0,
+      columnIndex: 0,
+      viewLabel,
+      colorByCategories,
+      colorIndex,
+    })
+  );
 
   return {
     useSpectrumLegend,
@@ -445,15 +473,18 @@ function setIndexToLegendData(
 
 const legend: StoreModule = {
   name: 'legend',
-  state: ({ options, series }) => {
+  state: ({ options, series, categories }) => {
     return {
-      legend: getLegendState(options, series) as Legend,
+      legend: getLegendState(options, series, categories) as Legend,
       circleLegend: {} as CircleLegend,
     };
   },
   action: {
     initLegendState({ state, initStoreState }) {
-      extend(state.legend, getLegendState(initStoreState.options, initStoreState.series));
+      extend(
+        state.legend,
+        getLegendState(initStoreState.options, initStoreState.series, initStoreState.categories)
+      );
     },
     setLegendLayout({ state }) {
       if (state.legend.useSpectrumLegend) {

diff --git a/apps/chart/src/store/seriesData.ts b/apps/chart/src/store/seriesData.ts
@@ -85,6 +85,15 @@ function getCoordinateDataRange(data, rawCategories: string[], zoomRange: RangeD
   return [start, end];
 }
 
+function getSeriesColors(
+  colors: string[],
+  colorIndex: number,
+  size: number,
+  isColorByCategories: boolean<
F438
/span>
+) {
+  return isColorByCategories ? colors.slice(0, size + 1) : colors[colorIndex % colors.length];
+}
+
 function getSeriesDataInRange(
   data,
   rawCategories: Categories,
@@ -173,19 +182,32 @@ const seriesData: StoreModule = {
       const rawSeries = deepCopy(initStoreState.series);
       const { disabledSeries, theme, zoomRange, rawCategories } = state;
       const newSeriesData = {};
+      let colorIndex = 0;
 
       Object.keys(rawSeries).forEach((seriesName) => {
         const { colors, iconTypes } = theme.series![seriesName];
-        let originSeriesData = rawSeries[seriesName].map((m, idx) => ({
-          ...m,
-          rawData: m.data,
-          data: getSeriesDataInRange(m.data, rawCategories, seriesName, zoomRange),
-          color: colors ? colors[idx % colors.length] : '',
-        }));
+
+        let originSeriesData = rawSeries[seriesName].map((series) => {
+          const isColorByCategories = !!series.colorByCategories;
+          const size = isColorByCategories ? (rawCategories as string[]).length : 1;
+
+          const color = colors
+            ? getSeriesColors(colors, colorIndex, size, isColorByCategories)
+            : '';
+
+          colorIndex += size;
+
+          return {
+            ...series,
+            rawData: series.data,
+            data: getSeriesDataInRange(series.data, rawCategories, seriesName, zoomRange),
+            color,
+          };
+        });
 
         if (seriesName === 'scatter') {
-          originSeriesData = originSeriesData.map((m, idx) => ({
-            ...m,
+          originSeriesData = originSeriesData.map((series, idx) => ({
+            ...series,
             iconType: iconTypes ? iconTypes[idx] : 'circle',
           }));
         }