@toast-ui/chart - npm Package Compare versions

Comparing version 4.3.6 to 4.4.0

dist/esm/charts/barChart.d.ts

@@ -13,2 +13,3 @@ import Chart from "./chart";
  *       @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.
@@ -29,3 +30,2 @@ *   @param {Object} [props.options] - Options for making Bar Chart.
  *       @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.
@@ -32,0 +32,0 @@ *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.

dist/esm/charts/barChart.js

@@ -38,2 +38,3 @@ import Chart from "./chart";
  *       @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.
@@ -54,3 +55,2 @@ *   @param {Object} [props.options] - Options for making Bar Chart.
  *       @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.
@@ -57,0 +57,0 @@ *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.

dist/esm/charts/columnChart.d.ts

@@ -13,2 +13,3 @@ import Chart from "./chart";
  *       @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.
@@ -29,3 +30,2 @@ *   @param {Object} [props.options] - Options for making Column Chart.
  *       @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.
@@ -32,0 +32,0 @@ *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.

dist/esm/charts/columnChart.js

@@ -37,2 +37,3 @@ import Chart from "./chart";
  *       @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.
@@ -53,3 +54,2 @@ *   @param {Object} [props.options] - Options for making Column Chart.
  *       @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.
@@ -56,0 +56,0 @@ *       @param {string} [props.options.series.eventDetectType] - Event detect type. 'grouped', 'point' is available.

dist/esm/component/boxSeries.d.ts

@@ -146,2 +146,4 @@ import Component from "./component";
         columnIndex?: number | undefined;
+        colorIndex?: number | undefined;
+        colorByCategories?: boolean | undefined;
     }[];
@@ -205,2 +207,4 @@ onMousemoveGroupedType(responders: RectResponderModel[]): void;
         columnIndex?: number | undefined;
+        colorIndex?: number | undefined;
+        colorByCategories?: boolean | undefined;
     }[];
@@ -207,0 +211,0 @@ getSeriesColor(name: string, color: string): string;

dist/esm/component/boxSeries.js

@@ -302,5 +302,6 @@ import Component from "./component";
         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);
@@ -310,3 +311,3 @@ data.forEach((value, index) => {
                 const barLength = this.makeBarLength(value, renderOptions);
-                const color = this.getSeriesColor(name, seriesColor);
+                const color = this.getSeriesColor(name, colorByCategories ? seriesColor[index % colorLength] : seriesColor);
                 if (isNumber(barLength)) {
@@ -379,3 +380,3 @@ const startPosition = this.getStartPosition(barLength, value, renderOptions, isLBSideWithDiverging);
         const tooltipData = [];
-        seriesData.forEach(({ data, name, color }) => {
+        seriesData.forEach(({ data, name, color, colorByCategories }) => {
             data.forEach((value, dataIndex) => {
@@ -387,3 +388,3 @@ if (!isNull(value)) {
                             label: name,
-                            color,
+                            color: colorByCategories ? color[dataIndex] : color,
                             value: this.getTooltipValue(value),
@@ -390,0 +391,0 @@ category: categories.length ? categories[dataIndex] : '',

dist/esm/component/boxStackSeries.js

@@ -161,5 +161,7 @@ import BoxSeries, { isLeftBottomSide, SeriesDirection } from "./boxSeries";
                 const { barLength, dataPosition } = this.getStackRectInfo(values, seriesIndex, ratio, 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;
+                const color = getRGBA(hexColor, active ? 1 : 0.2);
                 seriesModels.push(Object.assign(Object.assign({ type: 'rect', color,
@@ -166,0 +168,0 @@ name,

dist/esm/component/zoom.d.ts

@@ -52,2 +52,4 @@ import Component from "./component";
         columnIndex?: number | undefined;
+        colorIndex?: number | undefined;
+        colorByCategories?: boolean | undefined;
     }[];
@@ -54,0 +56,0 @@ onMousemove({ responders, mousePosition }: {

dist/esm/helpers/theme.js

@@ -279,3 +279,2 @@ import { getNestedPieChartAliasNames } from "./pieSeries";
     return {
-        colorByPoint: false,
         areaOpacity: 1,
@@ -282,0 +281,0 @@ hover: Object.assign(Object.assign({}, boxDefault.BOX_HOVER), { borderWidth: boxDefault.HOVER_THICKNESS, borderColor: '#ffffff', groupedRect: {

dist/esm/store/legend.js

@@ -188,15 +188,24 @@ import { isUndefined, sum, deepMergedCopy, range, isNumber } from "../helpers/utils";
 }
-function getLegendLabelsInfo(series, legendInfo) {
+function getLegendLabelsInfo(series, legendInfo, categories) {
     const maxTextLengthWithEllipsis = getMaxTextLengthWithEllipsis(legendInfo);
-    return Object.keys(series).flatMap((type) => series[type].map(({ name, colorValue, visible }) => {
-        const label = colorValue ? colorValue : name;
-        const { width, viewLabel } = getViewLabelInfo(legendInfo, label, maxTextLengthWithEllipsis);
-        return {
-            label,
-            type,
-            checked: (visible !== null && visible !== void 0 ? visible : true),
-            viewLabel,
-            width,
-        };
-    }));
+    let colorIndex = 0;
+    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 !== null && visible !== void 0 ? visible : true),
+                viewLabel,
+                width,
+            };
+        });
+        colorIndex += series[type].length - 1;
+        return labelInfo;
+    });
 }
@@ -212,5 +221,10 @@ function getItemWidth(label, checkboxVisible, useSpectrumLegend, font) {
     const colors = Object.values(series).reduce((acc, cur) => (cur && cur.colors ? [...acc, ...cur.colors] : acc), []);
-    return data.map((datum, idx) => (Object.assign(Object.assign({}, datum), { color: colors[idx] })));
+    const hasColorByCategories = data.some((legend) => legend.colorByCategories);
+    return data.map((datum, idx) => {
+        const { colorByCategories, colorIndex } = datum;
+        const index = hasColorByCategories ? colorIndex || idx : idx;
+        return Object.assign(Object.assign({}, datum), { color: colorByCategories ? '#aaa' : colors[index % colors.length] });
+    });
 }
-function getLegendState(options, series) {
+function getLegendState(options, series, categories) {
     var _a, _b, _c, _d, _e, _f, _g, _h, _j;
@@ -232,4 +246,4 @@ const useSpectrumLegend = (_c = (_b = (_a = options) === null || _a === void 0 ? void 0 : _a.series) === null || _b === void 0 ? void 0 : _b.useColorValue, (_c !== null && _c !== void 0 ? _c : !!series.heatmap));
         ? getNestedPieLegendLabelsInfo(series, legendInfo)
-        : getLegendLabelsInfo(series, legendInfo);
-    const data = legendLabelsInfo.map(({ label, type, checked, width, viewLabel }) => ({
+        : getLegendLabelsInfo(series, legendInfo, categories);
+    const data = legendLabelsInfo.map(({ label, type, checked, width, viewLabel, colorByCategories, colorIndex }) => ({
         label,
@@ -244,2 +258,4 @@ active: true,
         viewLabel,
+        colorByCategories,
+        colorIndex,
     }));
@@ -295,5 +311,5 @@ return {
     name: 'legend',
-    state: ({ options, series }) => {
+    state: ({ options, series, categories }) => {
         return {
-            legend: getLegendState(options, series),
+            legend: getLegendState(options, series, categories),
             circleLegend: {},
@@ -304,3 +320,3 @@ };
         initLegendState({ state, initStoreState }) {
-            extend(state.legend, getLegendState(initStoreState.options, initStoreState.series));
+            extend(state.legend, getLegendState(initStoreState.options, initStoreState.series, initStoreState.categories));
         },
@@ -307,0 +323,0 @@ setLegendLayout({ state }) {

dist/esm/store/seriesData.js

@@ -49,2 +49,5 @@ import { deepCopy, getFirstValidValue, includes, isBoolean, isNumber, isUndefined, range, } from "../helpers/utils";
 }
+function getSeriesColors(colors, colorIndex, size, isColorByCategories) {
+    return isColorByCategories ? colors.slice(0, size + 1) : colors[colorIndex % colors.length];
+}
 function getSeriesDataInRange(data, rawCategories, chartType, zoomRange) {
@@ -116,8 +119,17 @@ if (!zoomRange) {
             const newSeriesData = {};
+            let colorIndex = 0;
             Object.keys(rawSeries).forEach((seriesName) => {
                 var _a, _b, _c;
                 const { colors, iconTypes } = theme.series[seriesName];
-                let originSeriesData = rawSeries[seriesName].map((m, idx) => (Object.assign(Object.assign({}, 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.length : 1;
+                    const color = colors
+                        ? getSeriesColors(colors, colorIndex, size, isColorByCategories)
+                        : '';
+                    colorIndex += size;
+                    return Object.assign(Object.assign({}, series), { rawData: series.data, data: getSeriesDataInRange(series.data, rawCategories, seriesName, zoomRange), color });
+                });
                 if (seriesName === 'scatter') {
-                    originSeriesData = originSeriesData.map((m, idx) => (Object.assign(Object.assign({}, m), { iconType: iconTypes ? iconTypes[idx] : 'circle' })));
+                    originSeriesData = originSeriesData.map((series, idx) => (Object.assign(Object.assign({}, series), { iconType: iconTypes ? iconTypes[idx] : 'circle' })));
                 }
@@ -124,0 +136,0 @@ const seriesCount = originSeriesData.length;

dist/esm/store/theme.js

@@ -57,3 +57,3 @@ import { deepMergedCopy, omit } from "../helpers/utils";
 }
-function setColors(theme, series, commonSeriesOptions, isNestedPieChart) {
+function setColors(theme, series, commonSeriesOptions, isNestedPieChart, categories) {
     var _a, _b;
@@ -68,5 +68,16 @@ let index = 0;
         var _a;
-        const size = isNestedPieChart
-            ? series.pie[idx].data.length
-            : series[name].length;
+        const themeSeries = series[name] || [];
+        const filteredSeries = themeSeries.filter((chartSeries) => chartSeries.colorByCategories);
+        const hasColorByCategories = filteredSeries.length > 0;
+        let size;
+        if (isNestedPieChart) {
+            size = series.pie[idx].data.length;
+        }
+        else if (hasColorByCategories) {
+            const rejectedSeries = themeSeries.filter((chartSeries) => !chartSeries.colorByCategories);
+            size = rejectedSeries.length + categories.length;
+        }
+        else {
+            size = series[name].length;
+        }
         const target = isNestedPieChart ? theme.series.pie : theme.series;
@@ -94,3 +105,3 @@ if (!((_a = target[name]) === null || _a === void 0 ? void 0 : _a.colors)) {
 }
-function getTheme(options, series) {
+function getTheme(options, series, categories) {
     var _a, _b, _c;
@@ -110,3 +121,3 @@ const isNestedPieChart = hasNestedPieSeries(series);
     if (!series.heatmap) {
-        setColors(theme, series, commonSeriesOptions, isNestedPieChart);
+        setColors(theme, series, commonSeriesOptions, isNestedPieChart, categories);
     }
@@ -118,8 +129,8 @@ setPlot(theme);
     name: 'theme',
-    state: ({ options, series }) => ({
-        theme: getTheme(options, series),
+    state: ({ options, series, categories }) => ({
+        theme: getTheme(options, series, categories),
     }),
     action: {
         initThemeState({ state, initStoreState }) {
-            state.theme = getTheme(state.options, initStoreState.series);
+            state.theme = getTheme(state.options, initStoreState.series, initStoreState.categories);
         },
@@ -126,0 +137,0 @@ },

package.json

 {
   "name": "@toast-ui/chart",
-  "version": "4.3.6",
+  "version": "4.4.0",
   "description": "TOAST UI Application: Chart",
@@ -5,0 +5,0 @@ "main": "dist/toastui-chart.js",

types/components/legend.d.ts

@@ -18,2 +18,4 @@ import { Align, Point } from '../options';
   columnIndex: number;
+  colorIndex?: number;
+  colorByCategories?: boolean;
 } & Point;
@@ -20,0 +22,0 @@

types/options.d.ts

@@ -566,5 +566,6 @@ import { Categories, RawSeries, Options, StoreModule } from './store/store';
   rawData: T[];
-  color: string;
+  color: string | string[];
   stackGroup?: string;
   visible?: boolean;
+  colorByCategories?: boolean;
 }
@@ -575,2 +576,3 @@
   series: BoxSeriesInput<BoxSeriesDataType>[];
+  colorByCategories?: boolean;
 }
@@ -577,0 +579,0 @@

types/store/store.d.ts

@@ -51,2 +51,19 @@ import {
 
+export type ChartSeries = {
+  line: LineSeriesType;
+  scatter: ScatterSeriesType;
+  bar: BoxSeriesType<BoxSeriesDataType>;
+  column: BoxSeriesType<BoxSeriesDataType>;
+  area: AreaSeriesType;
+  bubble: BubbleSeriesType;
+  pie: PieSeriesType | NestedPieSeriesType;
+  radar: RadarSeriesType;
+  boxPlot: BoxPlotSeriesType;
+  bullet: BulletSeriesType;
+  treemap: TreemapSeriesType;
+  heatmap: HeatmapSeriesType;
+  radialBar: RadialBarSeriesType;
+  gauge: GaugeSeriesType;
+};
+
 type ChartSeriesMap = {
@@ -264,2 +281,4 @@ line: LineSeriesType[];
     | 'viewLabel'
+    | 'colorIndex'
+    | 'colorByCategories'
   > & {
@@ -310,2 +329,3 @@ width: number;
 export type Categories = string[] | HeatmapCategoriesType;
+export type DefaultCategories = Exclude<Categories, HeatmapCategoriesType>;
 
@@ -312,0 +332,0 @@ export type ChartOptions = {

No alert changes

Improved metrics

Total package byte prevSize

3652728

increased by0.22%

Lines of code

67108

increased by0.23%

No dependency changes