react-icecream-charts - npm Package Compare versions

Comparing version 0.7.0 to 0.8.0

esm/_base/modules/colors/ts/grey.d.ts

 declare enum Grey {
     grey1 = "#FFFFFF",
-    grey2 = "#F5F5F5",
-    grey3 = "#EEEEEE",
-    grey4 = "#BFBFBF",
-    grey5 = "#999999",
-    grey6 = "#666666",
-    grey7 = "#333333"
+    grey2 = "#FAFAFA",
+    grey3 = "#F5F5F5",
+    grey4 = "#EEEEEE",
+    grey5 = "#E5E5E5",
+    grey6 = "#D9D9D9",
+    grey7 = "#BFBFBF",
+    grey8 = "#999999",
+    grey9 = "#666666",
+    grey10 = "#333333"
 }
 export default Grey;

esm/_base/modules/colors/ts/grey.js

@@ -11,9 +11,12 @@ /*
     Grey["grey1"] = "#FFFFFF";
-    Grey["grey2"] = "#F5F5F5";
-    Grey["grey3"] = "#EEEEEE";
-    Grey["grey4"] = "#BFBFBF";
-    Grey["grey5"] = "#999999";
-    Grey["grey6"] = "#666666";
-    Grey["grey7"] = "#333333"; // 主标题、正文
+    Grey["grey2"] = "#FAFAFA";
+    Grey["grey3"] = "#F5F5F5";
+    Grey["grey4"] = "#EEEEEE";
+    Grey["grey5"] = "#E5E5E5";
+    Grey["grey6"] = "#D9D9D9";
+    Grey["grey7"] = "#BFBFBF";
+    Grey["grey8"] = "#999999";
+    Grey["grey9"] = "#666666";
+    Grey["grey10"] = "#333333"; // 主标题、正文
 })(Grey || (Grey = {}));
 export default Grey;

esm/_chart/options/chart/legend.d.ts

@@ -0,1 +1,6 @@
+import Highcharts from 'highcharts';
+export declare type LegendSeriesDataObject = {
+    name: string;
+    index: number;
+};
 export declare type LegendObjectOptions = {
@@ -6,2 +11,9 @@ title?: string;
     maxHeight?: number;
+    /** The width of the legend box. If a number is set, it translates to pixels. */
+    width?: number | string;
+    /**
+     * Callback function to format each of the series' labels. The `this`
+     * keyword refers to the series object. By default the series name is printed.
+     */
+    labelFormatter?: (seriesData: LegendSeriesDataObject) => string;
 };
@@ -8,0 +20,0 @@ export declare type LegendOptions = false | LegendObjectOptions;

esm/_chart/options/chart/legend.js

@@ -23,2 +23,3 @@ var __assign = (this && this.__assign) || function () {
 };
+import Highcharts from 'highcharts';
 import { colors } from 'icecream-base/lib';
@@ -30,3 +31,3 @@ export function createHighLegendOptions(options) {
     }
-    var align = options.align, title = options.title, rest = __rest(options, ["align", "title"]);
+    var align = options.align, title = options.title, labelFormatter = options.labelFormatter, rest = __rest(options, ["align", "title", "labelFormatter"]);
     var position;
@@ -48,3 +49,3 @@ if (align === 'top-left') {
     }
-    return __assign(__assign(__assign({}, position), { enabled: true, title: {
+    var legendOptions = __assign(__assign(__assign({}, position), { enabled: true, title: {
             text: title,
@@ -55,2 +56,15 @@ style: {
         } }), rest);
+    if (labelFormatter) {
+        legendOptions.labelFormatter = function innerLabelFormatter() {
+            if (this instanceof Highcharts.Series) {
+                var seriesData = {
+                    name: this.name,
+                    index: this.index
+                };
+                return labelFormatter(seriesData);
+            }
+            return this.name;
+        };
+    }
+    return legendOptions;
 }
@@ -57,0 +71,0 @@ // 用于面积图，折线图等

esm/pie/index.d.ts

 /// <reference types="react" />
-import { PlotPieOptions, SeriesPieOptions } from './options';
+import { ChartPieOptions, PlotPieOptions, SeriesPieOptions } from './options';
 import { ChartProps } from '../_chart';
 export * from './options';
-export interface PieChartProps extends ChartProps {
+export interface PieChartProps extends Omit<ChartProps, 'chartOptions'> {
+    chartOptions?: ChartPieOptions;
     options?: PlotPieOptions;
@@ -7,0 +8,0 @@ series?: SeriesPieOptions[];

esm/pie/index.js

@@ -41,3 +41,8 @@ var __assign = (this && this.__assign) || function () {
         if (legend === false || (legend === null || legend === void 0 ? void 0 : legend.align) === undefined || (legend === null || legend === void 0 ? void 0 : legend.align) === 'right-center') {
-            chart.legend.update(createRightCenterLegendOptions(chart.plotTop / 2));
+            var updatedLegendOptions = createRightCenterLegendOptions(chart.plotTop / 2);
+            // 防止更新 legend 时覆盖掉 layout
+            if (legend && legend.columns != null && legend.columns !== 1) {
+                updatedLegendOptions.layout = 'horizontal';
+            }
+            chart.legend.update(updatedLegendOptions);
         }
@@ -44,0 +49,0 @@ // 设置内部 title

esm/pie/options.d.ts

@@ -1,3 +0,3 @@
-import { CSSObject } from 'highcharts';
-import { LangData, PlotOptions, ChartOptions, SeriesOptions, PointOptionsObject } from '../_chart';
+import Highcharts, { CSSObject } from 'highcharts';
+import { LangData, PlotOptions, ChartOptions, SeriesOptions, PointOptionsObject, LegendObjectOptions } from '../_chart';
 export declare type InnerTitleObjectOptions = {
@@ -51,2 +51,26 @@ /**
 }
+export declare type LegendPointDataObject = {
+    name: string;
+    value: number;
+    color: string;
+    index: number;
+    /** 带样式的小圆点 html 字符串 */
+    pointDot: string;
+    /** 当前项所占的百分比 */
+    percentage?: number;
+};
+export declare type LegendPieObjectOptions = Omit<LegendObjectOptions, 'labelFormatter'> & {
+    /** 图例的展示列数，值为 1 时会出现图例宽度不断变小的情况，所以不做处理 */
+    columns?: number;
+    /**
+     * Callback function to format each of the points' labels. The `this`
+     * keyword refers to the point object in case of pie charts. By default
+     * the point name is printed.
+     */
+    labelFormatter?: (pointData: LegendPointDataObject) => string;
+};
+export declare type LegendPieOptions = false | LegendPieObjectOptions;
+export interface ChartPieOptions extends Omit<ChartOptions, 'legend'> {
+    legend?: LegendPieOptions;
+}
 export interface SeriesPieOptions extends SeriesOptions, Omit<PlotPieOptions, 'innerTitle' | 'innerSubtitle'> {
@@ -59,2 +83,2 @@ /**
 }
-export declare function createPieOptions(langData: LangData, options?: PlotPieOptions, chartOptions?: ChartOptions, series?: SeriesPieOptions[]): Highcharts.Options;
+export declare function createPieOptions(langData: LangData, options?: PlotPieOptions, chartOptions?: ChartPieOptions, series?: SeriesPieOptions[]): Highcharts.Options;

esm/pie/options.js

@@ -23,5 +23,11 @@ var __assign = (this && this.__assign) || function () {
 };
+import Highcharts from 'highcharts';
+import omit from 'lodash/omit';
 import { Cobalt, Blue, Green, Olivine, Yellow, OrangeRed, Magenta, Purple } from 'icecream-base/lib/colors';
 import { createHighOptions, createRightCenterLegendOptions, createHighSeriesOptions, isPointOptionsObject, createHighPointOptions } from '../_chart';
 export function createPieOptions(langData, options, chartOptions, series) {
+    var legendColumns = (chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.legend) && chartOptions.legend.columns;
+    if (legendColumns === false) {
+        legendColumns = undefined;
+    }
     var pieOptions = {
@@ -60,5 +66,31 @@ colors: [
         },
-        series: createSeriesPieOptions(series)
+        series: createSeriesPieOptions(series),
+        chart: {
+            events: {
+                load: wrapRender(legendColumns),
+                redraw: wrapRender(legendColumns)
+            }
+        }
     };
-    return createHighOptions('pie', chartOptions, langData, options, pieOptions);
+    if (legendColumns != null) {
+        pieOptions.legend.layout = 'horizontal';
+    }
+    if ((chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.legend) && chartOptions.legend.labelFormatter) {
+        var innerLabelFormatter_1 = chartOptions.legend.labelFormatter;
+        pieOptions.legend.labelFormatter = function labelFormatter() {
+            if (this instanceof Highcharts.Point) {
+                var pointData = {
+                    name: this.name,
+                    value: this.y || 0,
+                    color: this.color,
+                    index: this.index,
+                    pointDot: "<span style=\"margin-right:5px;color:" + this.color + ";font-family: initial;\">\u25CF</span>",
+                    percentage: this.percentage
+                };
+                return innerLabelFormatter_1(pointData);
+            }
+            return this.name;
+        };
+    }
+    return createHighOptions('pie', omit(chartOptions, 'legend', 'labelFormatter'), langData, options, pieOptions);
 }
@@ -81,1 +113,35 @@ function createSeriesPieOptions(series) {
 }
+// 参考1：https://stackoverflow.com/a/51534428
+// 参考2：https://github.com/highcharts/highcharts/blob/ee7de2bd881e820ee8ab534e3373b68283d54f93/ts/Core/Legend/Legend.ts#L1097
+// 当图表加载完成时，获取图例的最大宽度和图例之间的间隔，根据要生成的列数计算图例所需要的宽度 widthA，
+// 再获取图例在画布上能用的最大宽度 widthB，如果 widthA 小于等于 widthB，把图例的总宽度设为 widthA，
+// 如果 widthA 大于 widthB，单列展示，图例的总宽度等于图例的最大宽度
+function wrapRender(column) {
+    function renderElements() {
+        // highcharts 8.x 的 ts 声明存在大量类型缺失，升级 highcharts 到最新版本即可解决
+        var legend = this.legend;
+        if (legend) {
+            legend.destroy();
+        }
+        // distance between 2 elements
+        var itemDistance = legend.options.itemDistance || 0;
+        // the biggest element
+        var maxItemWidth = legend.maxItemWidth;
+        // make the width of the legend in the size of 2 largest elements +
+        // distance
+        var nextLegendWidth = (maxItemWidth + itemDistance) * column - itemDistance;
+        // Compute how wide the legend is allowed to be
+        var allowedWidth = legend.chart.spacingBox.width - 2 * legend.padding - legend.options.x;
+        // if the length of the 2 largest elements + the distance between them
+        // is less than the width of container, we make 1 row, else
+        // set legend width 2 max elements + distance between
+        if (allowedWidth < nextLegendWidth) {
+            legend.options.width = maxItemWidth;
+        }
+        else {
+            legend.options.width = nextLegendWidth;
+        }
+        this.render();
+    }
+    return column == null || column === 1 ? undefined : renderElements;
+}

lib/_base/modules/colors/ts/grey.d.ts

 declare enum Grey {
     grey1 = "#FFFFFF",
-    grey2 = "#F5F5F5",
-    grey3 = "#EEEEEE",
-    grey4 = "#BFBFBF",
-    grey5 = "#999999",
-    grey6 = "#666666",
-    grey7 = "#333333"
+    grey2 = "#FAFAFA",
+    grey3 = "#F5F5F5",
+    grey4 = "#EEEEEE",
+    grey5 = "#E5E5E5",
+    grey6 = "#D9D9D9",
+    grey7 = "#BFBFBF",
+    grey8 = "#999999",
+    grey9 = "#666666",
+    grey10 = "#333333"
 }
 export default Grey;

lib/_base/modules/colors/ts/grey.js

@@ -13,9 +13,12 @@ "use strict";
     Grey["grey1"] = "#FFFFFF";
-    Grey["grey2"] = "#F5F5F5";
-    Grey["grey3"] = "#EEEEEE";
-    Grey["grey4"] = "#BFBFBF";
-    Grey["grey5"] = "#999999";
-    Grey["grey6"] = "#666666";
-    Grey["grey7"] = "#333333"; // 主标题、正文
+    Grey["grey2"] = "#FAFAFA";
+    Grey["grey3"] = "#F5F5F5";
+    Grey["grey4"] = "#EEEEEE";
+    Grey["grey5"] = "#E5E5E5";
+    Grey["grey6"] = "#D9D9D9";
+    Grey["grey7"] = "#BFBFBF";
+    Grey["grey8"] = "#999999";
+    Grey["grey9"] = "#666666";
+    Grey["grey10"] = "#333333"; // 主标题、正文
 })(Grey || (Grey = {}));
 exports.default = Grey;

lib/_chart/options/chart/legend.d.ts

@@ -0,1 +1,6 @@
+import Highcharts from 'highcharts';
+export declare type LegendSeriesDataObject = {
+    name: string;
+    index: number;
+};
 export declare type LegendObjectOptions = {
@@ -6,2 +11,9 @@ title?: string;
     maxHeight?: number;
+    /** The width of the legend box. If a number is set, it translates to pixels. */
+    width?: number | string;
+    /**
+     * Callback function to format each of the series' labels. The `this`
+     * keyword refers to the series object. By default the series name is printed.
+     */
+    labelFormatter?: (seriesData: LegendSeriesDataObject) => string;
 };
@@ -8,0 +20,0 @@ export declare type LegendOptions = false | LegendObjectOptions;

lib/_chart/options/chart/legend.js

@@ -24,4 +24,8 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createMapLegendOptions = exports.createBottomCenterLegendOptions = exports.createRightTopLegendOptions = exports.createRightCenterLegendOptions = exports.createTopLeftLegendOptions = exports.createHighLegendOptions = void 0;
+var highcharts_1 = __importDefault(require("highcharts"));
 var lib_1 = require("icecream-base/lib");
@@ -33,3 +37,3 @@ function createHighLegendOptions(options) {
     }
-    var align = options.align, title = options.title, rest = __rest(options, ["align", "title"]);
+    var align = options.align, title = options.title, labelFormatter = options.labelFormatter, rest = __rest(options, ["align", "title", "labelFormatter"]);
     var position;
@@ -51,3 +55,3 @@ if (align === 'top-left') {
     }
-    return __assign(__assign(__assign({}, position), { enabled: true, title: {
+    var legendOptions = __assign(__assign(__assign({}, position), { enabled: true, title: {
             text: title,
@@ -58,2 +62,15 @@ style: {
         } }), rest);
+    if (labelFormatter) {
+        legendOptions.labelFormatter = function innerLabelFormatter() {
+            if (this instanceof highcharts_1.default.Series) {
+                var seriesData = {
+                    name: this.name,
+                    index: this.index
+                };
+                return labelFormatter(seriesData);
+            }
+            return this.name;
+        };
+    }
+    return legendOptions;
 }
@@ -60,0 +77,0 @@ exports.createHighLegendOptions = createHighLegendOptions;

lib/pie/index.d.ts

 /// <reference types="react" />
-import { PlotPieOptions, SeriesPieOptions } from './options';
+import { ChartPieOptions, PlotPieOptions, SeriesPieOptions } from './options';
 import { ChartProps } from '../_chart';
 export * from './options';
-export interface PieChartProps extends ChartProps {
+export interface PieChartProps extends Omit<ChartProps, 'chartOptions'> {
+    chartOptions?: ChartPieOptions;
     options?: PlotPieOptions;
@@ -7,0 +8,0 @@ series?: SeriesPieOptions[];

lib/pie/index.js

@@ -66,3 +66,8 @@ "use strict";
         if (legend === false || (legend === null || legend === void 0 ? void 0 : legend.align) === undefined || (legend === null || legend === void 0 ? void 0 : legend.align) === 'right-center') {
-            chart.legend.update(_chart_1.createRightCenterLegendOptions(chart.plotTop / 2));
+            var updatedLegendOptions = _chart_1.createRightCenterLegendOptions(chart.plotTop / 2);
+            // 防止更新 legend 时覆盖掉 layout
+            if (legend && legend.columns != null && legend.columns !== 1) {
+                updatedLegendOptions.layout = 'horizontal';
+            }
+            chart.legend.update(updatedLegendOptions);
         }
@@ -69,0 +74,0 @@ // 设置内部 title

lib/pie/options.d.ts

@@ -1,3 +0,3 @@
-import { CSSObject } from 'highcharts';
-import { LangData, PlotOptions, ChartOptions, SeriesOptions, PointOptionsObject } from '../_chart';
+import Highcharts, { CSSObject } from 'highcharts';
+import { LangData, PlotOptions, ChartOptions, SeriesOptions, PointOptionsObject, LegendObjectOptions } from '../_chart';
 export declare type InnerTitleObjectOptions = {
@@ -51,2 +51,26 @@ /**
 }
+export declare type LegendPointDataObject = {
+    name: string;
+    value: number;
+    color: string;
+    index: number;
+    /** 带样式的小圆点 html 字符串 */
+    pointDot: string;
+    /** 当前项所占的百分比 */
+    percentage?: number;
+};
+export declare type LegendPieObjectOptions = Omit<LegendObjectOptions, 'labelFormatter'> & {
+    /** 图例的展示列数，值为 1 时会出现图例宽度不断变小的情况，所以不做处理 */
+    columns?: number;
+    /**
+     * Callback function to format each of the points' labels. The `this`
+     * keyword refers to the point object in case of pie charts. By default
+     * the point name is printed.
+     */
+    labelFormatter?: (pointData: LegendPointDataObject) => string;
+};
+export declare type LegendPieOptions = false | LegendPieObjectOptions;
+export interface ChartPieOptions extends Omit<ChartOptions, 'legend'> {
+    legend?: LegendPieOptions;
+}
 export interface SeriesPieOptions extends SeriesOptions, Omit<PlotPieOptions, 'innerTitle' | 'innerSubtitle'> {
@@ -59,2 +83,2 @@ /**
 }
-export declare function createPieOptions(langData: LangData, options?: PlotPieOptions, chartOptions?: ChartOptions, series?: SeriesPieOptions[]): Highcharts.Options;
+export declare function createPieOptions(langData: LangData, options?: PlotPieOptions, chartOptions?: ChartPieOptions, series?: SeriesPieOptions[]): Highcharts.Options;

lib/pie/options.js

@@ -24,7 +24,16 @@ "use strict";
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createPieOptions = void 0;
+var highcharts_1 = __importDefault(require("highcharts"));
+var omit_1 = __importDefault(require("lodash/omit"));
 var colors_1 = require("icecream-base/lib/colors");
 var _chart_1 = require("../_chart");
 function createPieOptions(langData, options, chartOptions, series) {
+    var legendColumns = (chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.legend) && chartOptions.legend.columns;
+    if (legendColumns === false) {
+        legendColumns = undefined;
+    }
     var pieOptions = {
@@ -63,5 +72,31 @@ colors: [
         },
-        series: createSeriesPieOptions(series)
+        series: createSeriesPieOptions(series),
+        chart: {
+            events: {
+                load: wrapRender(legendColumns),
+                redraw: wrapRender(legendColumns)
+            }
+        }
     };
-    return _chart_1.createHighOptions('pie', chartOptions, langData, options, pieOptions);
+    if (legendColumns != null) {
+        pieOptions.legend.layout = 'horizontal';
+    }
+    if ((chartOptions === null || chartOptions === void 0 ? void 0 : chartOptions.legend) && chartOptions.legend.labelFormatter) {
+        var innerLabelFormatter_1 = chartOptions.legend.labelFormatter;
+        pieOptions.legend.labelFormatter = function labelFormatter() {
+            if (this instanceof highcharts_1.default.Point) {
+                var pointData = {
+                    name: this.name,
+                    value: this.y || 0,
+                    color: this.color,
+                    index: this.index,
+                    pointDot: "<span style=\"margin-right:5px;color:" + this.color + ";font-family: initial;\">\u25CF</span>",
+                    percentage: this.percentage
+                };
+                return innerLabelFormatter_1(pointData);
+            }
+            return this.name;
+        };
+    }
+    return _chart_1.createHighOptions('pie', omit_1.default(chartOptions, 'legend', 'labelFormatter'), langData, options, pieOptions);
 }
@@ -85,1 +120,35 @@ exports.createPieOptions = createPieOptions;
 }
+// 参考1：https://stackoverflow.com/a/51534428
+// 参考2：https://github.com/highcharts/highcharts/blob/ee7de2bd881e820ee8ab534e3373b68283d54f93/ts/Core/Legend/Legend.ts#L1097
+// 当图表加载完成时，获取图例的最大宽度和图例之间的间隔，根据要生成的列数计算图例所需要的宽度 widthA，
+// 再获取图例在画布上能用的最大宽度 widthB，如果 widthA 小于等于 widthB，把图例的总宽度设为 widthA，
+// 如果 widthA 大于 widthB，单列展示，图例的总宽度等于图例的最大宽度
+function wrapRender(column) {
+    function renderElements() {
+        // highcharts 8.x 的 ts 声明存在大量类型缺失，升级 highcharts 到最新版本即可解决
+        var legend = this.legend;
+        if (legend) {
+            legend.destroy();
+        }
+        // distance between 2 elements
+        var itemDistance = legend.options.itemDistance || 0;
+        // the biggest element
+        var maxItemWidth = legend.maxItemWidth;
+        // make the width of the legend in the size of 2 largest elements +
+        // distance
+        var nextLegendWidth = (maxItemWidth + itemDistance) * column - itemDistance;
+        // Compute how wide the legend is allowed to be
+        var allowedWidth = legend.chart.spacingBox.width - 2 * legend.padding - legend.options.x;
+        // if the length of the 2 largest elements + the distance between them
+        // is less than the width of container, we make 1 row, else
+        // set legend width 2 max elements + distance between
+        if (allowedWidth < nextLegendWidth) {
+            legend.options.width = maxItemWidth;
+        }
+        else {
+            legend.options.width = nextLegendWidth;
+        }
+        this.render();
+    }
+    return column == null || column === 1 ? undefined : renderElements;
+}

package.json

 {
   "name": "react-icecream-charts",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "main": "esm/index.js",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

4804070

increased by0.24%

Lines of code

144808

increased by0.17%

Worsened metrics

Number of package files

328

decreased by-0.61%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes