amazing-react-charts 1.1.8 → 1.2.0

package/core/pyramid-bar-chart/PyramidBarChart.stories.d.ts

@@ -3,4 +3,4 @@ import PyramidBarChart from './PyramidBarChart';
 declare const meta: Meta;
 export default meta;
 type Story = StoryObj<typeof PyramidBarChart>;
-export declare const pyramidChart: Story;
+export declare const pyramidBarChart: Story;

package/core/pyramid-chart/PyramidChart.d.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { IDefaultChartProps, ToolboxEntryProps, WidthProps } from '../types';
+export interface SeriesData {
+    value: number;
+    name: string;
+    itemStyle?: object;
+    tooltipText?: string;
+}
+export interface IProps extends Omit<IDefaultChartProps, 'data'> {
+    data: SeriesData[];
+    width?: WidthProps;
+    style?: object;
+    toolboxTooltip?: ToolboxEntryProps;
+    custom?: {
+        gap?: string | number;
+        top?: string | number;
+        bottom?: string | number;
+        left?: string | number;
+        width?: string | number;
+        minSize?: string | number;
+        maxSize?: string | number;
+    };
+    labelPosition?: 'inside' | 'top' | 'bottom' | 'left' | 'right' | 'insideLeft' | 'insideRight' | 'insideTop' | 'insideBottom' | 'insideTopLeft' | 'insideBottomLeft' | 'insideTopRight' | 'insideBottomRight';
+}
+declare const PyramidChart: (props: IProps) => React.JSX.Element;
+export default PyramidChart;

package/core/pyramid-chart/PyramidChart.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _echartsForReact = _interopRequireDefault(require("echarts-for-react"));
+var _auxiliarFunctions = require("../../lib/auxiliarFunctions");
+var _commonStyles = require("../../commonStyles");
+var _theme = require("flipper-ui/theme");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var neutral = _theme.theme.colors.neutral;
+var PyramidChart = function PyramidChart(props) {
+  var _toolboxTooltip$saveA, _toolboxTooltip$saveA2, _toolboxTooltip$dataV;
+  var data = props.data,
+    style = props.style,
+    custom = props.custom,
+    labelPosition = props.labelPosition,
+    titleFontSize = props.titleFontSize,
+    toolboxTooltip = props.toolboxTooltip,
+    titleProps = props.title,
+    marginRightToolbox = props.marginRightToolbox;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    title = _useState2[0],
+    setTitle = _useState2[1];
+  (0, _react.useEffect)(function () {
+    if (toolboxTooltip !== null && toolboxTooltip !== void 0 && toolboxTooltip.saveAsImageWithTitle) {
+      setTitle(false);
+    } else {
+      setTitle(true);
+    }
+  }, [toolboxTooltip]);
+  var handleShowTitle = function handleShowTitle(show) {
+    setTitle(show);
+  };
+  var myTool = (toolboxTooltip === null || toolboxTooltip === void 0 ? void 0 : toolboxTooltip.saveAsImageWithTitle) && {
+    myTool: (0, _auxiliarFunctions.getSaveAsImageWithTitle)((_toolboxTooltip$saveA = toolboxTooltip.saveAsImageWithTitle.title) !== null && _toolboxTooltip$saveA !== void 0 ? _toolboxTooltip$saveA : '', handleShowTitle)
+  };
+  var saveAsImage = (toolboxTooltip === null || toolboxTooltip === void 0 ? void 0 : toolboxTooltip.saveAsImage) && {
+    saveAsImage: (0, _auxiliarFunctions.getSaveAsImage)((_toolboxTooltip$saveA2 = toolboxTooltip.saveAsImage.title) !== null && _toolboxTooltip$saveA2 !== void 0 ? _toolboxTooltip$saveA2 : '')
+  };
+  var toolbox = toolboxTooltip && _objectSpread(_objectSpread({}, _commonStyles.TOOLBOX_DEFAULT_PROPS), {}, {
+    right: marginRightToolbox || '2%',
+    feature: _objectSpread(_objectSpread(_objectSpread({}, myTool), saveAsImage), {}, {
+      dataView: toolboxTooltip.dataView && (0, _auxiliarFunctions.getDataView)((_toolboxTooltip$dataV = toolboxTooltip.dataView.title) !== null && _toolboxTooltip$dataV !== void 0 ? _toolboxTooltip$dataV : '')
+    })
+  });
+  var series = [{
+    type: 'funnel',
+    sort: 'ascending',
+    data: data.map(function (item) {
+      return {
+        value: item.value,
+        name: item.name,
+        itemStyle: item.itemStyle
+      };
+    }),
+    label: {
+      show: true,
+      position: labelPosition || 'inside',
+      fontWeight: 600
+    },
+    gap: (custom === null || custom === void 0 ? void 0 : custom.gap) || 2,
+    top: (custom === null || custom === void 0 ? void 0 : custom.top) || 20,
+    bottom: (custom === null || custom === void 0 ? void 0 : custom.bottom) || 20,
+    left: (custom === null || custom === void 0 ? void 0 : custom.left) || '10%',
+    width: (custom === null || custom === void 0 ? void 0 : custom.width) || '80%',
+    minSize: (custom === null || custom === void 0 ? void 0 : custom.minSize) || '0',
+    maxSize: (custom === null || custom === void 0 ? void 0 : custom.maxSize) || '80%'
+  }];
+  var options = {
+    series: series,
+    // @ts-expect-error formatter params
+    tooltip: {
+      trigger: 'item',
+      axisPointer: {
+        type: 'shadow'
+      },
+      backgroundColor: "".concat(neutral[200], "99"),
+      textStyle: {
+        fontSize: 11.5,
+        color: neutral[50],
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+      },
+      extraCssText: 'border: none; padding: 6px;',
+      formatter: function formatter(params) {
+        var dataItem = data.find(function (item) {
+          return item.name === params.name;
+        });
+        return dataItem ? dataItem.tooltipText : params.name;
+      }
+    },
+    title: {
+      left: '2%',
+      show: title,
+      text: titleProps,
+      textStyle: {
+        fontWeight: 400,
+        color: neutral[200],
+        fontSize: titleFontSize || 16,
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif'
+      }
+    },
+    toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
+      tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
+        formatter: function formatter(param) {
+          return "<div>".concat(param.title, "</div>");
+        }
+      })
+    })
+  };
+  return /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
+    option: options,
+    style: style ? style : _commonStyles.CHART_WIDTH
+  });
+};
+var _default = exports["default"] = PyramidChart;

package/core/pyramid-chart/PyramidChart.stories.d.ts

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import PyramidChart from './PyramidChart';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof PyramidChart>;
+export declare const pyramidChart: Story;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "amazing-react-charts",
-    "version": "1.1.8",
+    "version": "1.2.0",
     "description": "An amazing react charts package based in echarts",
     "main": "dist/index.js",
     "license": "MIT",
@@ -33,52 +33,52 @@
         "echarts-for-react": "3.0.2"
     },
     "devDependencies": {
-        "@babel/cli": "7.25.9",
+        "@babel/cli": "7.26.4",
         "@babel/core": "7.26.0",
-        "@babel/plugin-transform-modules-commonjs": "7.25.9",
+        "@babel/plugin-transform-modules-commonjs": "7.26.3",
         "@babel/plugin-transform-runtime": "7.25.9",
         "@babel/preset-env": "7.26.0",
-        "@babel/preset-react": "7.25.9",
+        "@babel/preset-react": "7.26.3",
         "@babel/preset-typescript": "7.26.0",
-        "@storybook/addon-essentials": "8.4.5",
+        "@storybook/addon-essentials": "8.4.7",
         "@storybook/addon-webpack5-compiler-babel": "3.0.3",
-        "@storybook/blocks": "8.4.5",
-        "@storybook/react": "8.4.5",
-        "@storybook/react-webpack5": "8.4.5",
-        "@stylistic/eslint-plugin": "2.11.0",
+        "@storybook/blocks": "8.4.7",
+        "@storybook/react": "8.4.7",
+        "@storybook/react-webpack5": "8.4.7",
+        "@stylistic/eslint-plugin": "2.12.1",
         "@testing-library/dom": "10.4.0",
         "@testing-library/jest-dom": "6.6.3",
-        "@testing-library/react": "16.0.1",
+        "@testing-library/react": "16.1.0",
         "@testing-library/user-event": "14.5.2",
         "@types/jest": "29.5.14",
-        "@types/node": "22.9.1",
+        "@types/node": "22.10.2",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
-        "@typescript-eslint/eslint-plugin": "8.15.0",
-        "@typescript-eslint/parser": "8.15.0",
+        "@typescript-eslint/eslint-plugin": "8.18.0",
+        "@typescript-eslint/parser": "8.18.0",
         "canvas": "2.11.2",
         "date-fns": "4.1.0",
-        "eslint": "9.15.0",
+        "eslint": "9.17.0",
         "eslint-config-prettier": "9.1.0",
-        "eslint-import-resolver-typescript": "3.6.3",
+        "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
         "eslint-plugin-react": "7.37.2",
-        "eslint-plugin-react-hooks": "5.0.0",
-        "flipper-ui": "0.35.1",
+        "eslint-plugin-react-hooks": "5.1.0",
+        "flipper-ui": "0.35.2",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.3.3",
+        "prettier": "3.4.2",
         "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
-        "storybook": "8.4.5",
+        "storybook": "8.4.7",
         "styled-components": "6.1.13",
         "ts-jest": "29.2.5",
         "ts-node": "10.9.2",
-        "typescript": "5.6.3",
-        "typescript-eslint": "8.15.0",
-        "webpack": "5.96.1"
+        "typescript": "5.7.2",
+        "typescript-eslint": "8.18.0",
+        "webpack": "5.97.1"
     },
     "peerDependencies": {
         "date-fns": "^4.0.0",

package/test/pyramid-chart.spec.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';