amazing-react-charts 1.2.2 → 1.2.3

package/commonStyles.d.ts

@@ -29,4 +29,10 @@ export declare const DonutWrapper: import("styled-components/dist/types").IStyle
 export declare const ChartStorieWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChartWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ChartTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const GaugeLegendContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GaugeLegendContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const GaugeCircle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    color?: string;
+}>> & string;
+export declare const GaugeLegend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CsvDownloadButtonStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;

package/commonStyles.js

@@ -4,11 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TOOLTIP_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = exports.STRAIGHT_LINE_ICON = exports.PictorialWrapper = exports.MIN_WIDTH = exports.DonutWrapper = exports.DASHED_LINE_ICON = exports.CsvDownloadButtonStyle = exports.ChartWrapper = exports.ChartTitle = exports.ChartStorieWrapper = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
+exports.TOOLTIP_DEFAULT_PROPS = exports.TOOLBOX_DEFAULT_PROPS = exports.STRAIGHT_LINE_ICON = exports.PictorialWrapper = exports.MIN_WIDTH = exports.GaugeLegendContent = exports.GaugeLegendContainer = exports.GaugeLegend = exports.GaugeCircle = exports.DonutWrapper = exports.DASHED_LINE_ICON = exports.CsvDownloadButtonStyle = exports.ChartWrapper = exports.ChartTitle = exports.ChartStorieWrapper = exports.CHART_WIDTH = exports.CHART_HEIGHT = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("flipper-ui/theme");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10;
 var neutral = _theme.theme.colors.neutral;
 var STRAIGHT_LINE_ICON = exports.STRAIGHT_LINE_ICON = 'path://M0 0H25H50V2H25H0V0Z';
 var DASHED_LINE_ICON = exports.DASHED_LINE_ICON = 'path://M180 1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z, M810 ' + '1000 l0 -40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40zm, M1440 1000 l0 ' + '-40 200 0 200 0 0 40 0 40 -200 0 -200 0 0 -40z';
@@ -41,4 +41,10 @@ var DonutWrapper = exports.DonutWrapper = _styledComponents["default"].div(_temp
 var ChartStorieWrapper = exports.ChartStorieWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 50%;\n    margin: 0 auto;\n"])));
 var ChartWrapper = exports.ChartWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    position: relative;\n"])));
 var ChartTitle = exports.ChartTitle = _styledComponents["default"].h1(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n    color: ", ";\n    top: 5;\n    margin: 0px;\n    font-size: 16px;\n    font-weight: 400;\n    position: absolute;\n"])), neutral[200]);
-var CsvDownloadButtonStyle = exports.CsvDownloadButtonStyle = _styledComponents["default"].button(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    font-weight: bold;\n    background: ", ";\n    text-transform: uppercase;\n    border: none;\n    width: 40px;\n    height: 20px;\n    cursor: pointer;\n    display: block;\n    position: absolute;\n    margin-top: -295px;\n    margin-left: 80%;\n\n    &:hover::after {\n        content: 'Save as CSV';\n        position: absolute;\n        text-transform: none;\n        font-weight: lighter;\n        top: 123%;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: ", ";\n        opacity: 55%;\n        color: ", ";\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        height: 19px;\n        white-space: nowrap;\n        text-align: center;\n        display: flex;\n        align-items: center;\n    }\n"])), neutral[50], neutral[200], neutral[50]);
+var GaugeLegendContainer = exports.GaugeLegendContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    gap: 16px;\n    align-items: center;\n    justify-content: center;\n"])));
+var GaugeLegendContent = exports.GaugeLegendContent = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    gap: 6px;\n    font-family: Roboto, Helvetica, Arial, sans-serif;\n"])));
+var GaugeCircle = exports.GaugeCircle = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 20px;\n    height: 20px;\n    margin-bottom: 4px;\n    border-radius: 100%;\n    background-color: ", ";\n"])), function (props) {
+  return props.color;
+});
+var GaugeLegend = exports.GaugeLegend = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n    font-size: 14px;\n"])));
+var CsvDownloadButtonStyle = exports.CsvDownloadButtonStyle = _styledComponents["default"].button(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["\n    font-weight: bold;\n    background: ", ";\n    text-transform: uppercase;\n    border: none;\n    width: 40px;\n    height: 20px;\n    cursor: pointer;\n    display: block;\n    position: absolute;\n    margin-top: -295px;\n    margin-left: 80%;\n\n    &:hover::after {\n        content: 'Save as CSV';\n        position: absolute;\n        text-transform: none;\n        font-weight: lighter;\n        top: 123%;\n        left: 50%;\n        transform: translateX(-50%);\n        background-color: ", ";\n        opacity: 55%;\n        color: ", ";\n        padding: 4px 8px;\n        border-radius: 4px;\n        font-size: 12px;\n        height: 19px;\n        white-space: nowrap;\n        text-align: center;\n        display: flex;\n        align-items: center;\n    }\n"])), neutral[50], neutral[200], neutral[50]);

package/core/gauge-chart/GaugeChart.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { IDefaultChartProps, GaugeData } from '../types';
+export interface IProps extends Omit<IDefaultChartProps, 'data'> {
+    data: GaugeData[];
+    legendValue?: number;
+    axisLineWidth?: number;
+    titleFontSize?: number;
+    detailFontSize?: number;
+    height?: number | string;
+    colorLine?: [number, string][];
+    axisLabel?: {
+        limit: number;
+        label: string;
+    }[];
+    legendData?: {
+        icon: JSX.Element;
+        legend: number;
+    }[];
+}
+declare const GaugeChart: (props: IProps) => React.JSX.Element;
+export default GaugeChart;

package/core/gauge-chart/GaugeChart.js

@@ -0,0 +1,147 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(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 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 _theme$colors = _theme.theme.colors,
+  amber = _theme$colors.amber,
+  green = _theme$colors.green,
+  red = _theme$colors.red,
+  orange = _theme$colors.orange,
+  gray = _theme$colors.gray,
+  neutral = _theme$colors.neutral;
+var GaugeChart = function GaugeChart(props) {
+  var _toolboxTooltip$saveA;
+  var data = props.data,
+    height = props.height,
+    tooltip = props.tooltip,
+    axisLabel = props.axisLabel,
+    colorLine = props.colorLine,
+    legendData = props.legendData,
+    legendValue = props.legendValue,
+    axisLineWidth = props.axisLineWidth,
+    titleFontSize = props.titleFontSize,
+    toolboxTooltip = props.toolboxTooltip,
+    detailFontSize = props.detailFontSize;
+  var CHART_STYLE = {
+    width: '99.9%',
+    height: height || 400
+  };
+  var getColor = function getColor(value) {
+    return value <= (legendValue !== null && legendValue !== void 0 ? legendValue : 75) ? red[500] : green[300];
+  };
+  var formatTooltip = function formatTooltip() {
+    return tooltip ? "".concat(tooltip.label, ": ").concat(Number(tooltip.labelComplement) * 100, " %") : '';
+  };
+  var formatAxisLabel = function formatAxisLabel(value) {
+    var match = axisLabel === null || axisLabel === void 0 ? void 0 : axisLabel.find(function (item) {
+      return item.limit === value;
+    });
+    return match ? match.label : '';
+  };
+  var toolbox = toolboxTooltip && {
+    showTitle: false,
+    top: '10%',
+    right: '15%',
+    feature: {
+      saveAsImage: toolboxTooltip.saveAsImage && (0, _auxiliarFunctions.getSaveAsImage)((_toolboxTooltip$saveA = toolboxTooltip.saveAsImage.title) !== null && _toolboxTooltip$saveA !== void 0 ? _toolboxTooltip$saveA : '')
+    }
+  };
+  var options = {
+    series: [{
+      type: 'gauge',
+      startAngle: 180,
+      endAngle: 0,
+      center: ['50%', '70%'],
+      radius: '90%',
+      min: 0,
+      max: 1,
+      splitNumber: 8,
+      data: data,
+      axisLine: {
+        lineStyle: {
+          width: axisLineWidth !== null && axisLineWidth !== void 0 ? axisLineWidth : 75,
+          color: colorLine !== null && colorLine !== void 0 ? colorLine : [[0.25, red[500]], [0.5, orange[600]], [0.75, amber[500]], [1, green[300]]]
+        }
+      },
+      pointer: {
+        width: 20,
+        length: '95%',
+        offsetCenter: [0, '-5%'],
+        icon: 'path://M12.8,-0.7l12,-40.1H0.7L12.8,-0.7z',
+        itemStyle: {
+          color: gray[900]
+        }
+      },
+      axisTick: {
+        length: 0
+      },
+      splitLine: {
+        length: 0
+      },
+      axisLabel: {
+        color: gray[800],
+        fontSize: 16,
+        distance: -40,
+        rotate: 'tangential',
+        formatter: formatAxisLabel
+      },
+      title: {
+        fontSize: titleFontSize !== null && titleFontSize !== void 0 ? titleFontSize : 30,
+        color: gray[800],
+        offsetCenter: [0, '20%']
+      },
+      detail: {
+        fontSize: detailFontSize !== null && detailFontSize !== void 0 ? detailFontSize : 24,
+        color: gray[900],
+        valueAnimation: true,
+        offsetCenter: [0, '40%'],
+        formatter: function formatter(value) {
+          return Math.round(value * 100) + ' %';
+        }
+      }
+    }],
+    tooltip: {
+      trigger: 'item',
+      formatter: formatTooltip,
+      backgroundColor: "".concat(neutral[200], "99"),
+      textStyle: {
+        fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
+        fontSize: 11.5,
+        color: neutral[50]
+      },
+      extraCssText: 'border: none; padding: 6px;'
+    },
+    toolbox: _objectSpread(_objectSpread({}, toolbox), {}, {
+      tooltip: _objectSpread(_objectSpread({}, _commonStyles.TOOLTIP_DEFAULT_PROPS), {}, {
+        // @ts-expect-error issue
+        // if the trigger it's not set to none, the tooltip shows an arrow
+        trigger: 'none',
+        formatter: function formatter(param) {
+          return "<div>".concat(param.title, "</div>");
+        }
+      })
+    })
+  };
+  return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_echartsForReact["default"], {
+    option: options,
+    style: CHART_STYLE
+  }), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegendContainer, null, legendData === null || legendData === void 0 ? void 0 : legendData.map(function (it, i) {
+    return /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegendContent, {
+      key: i
+    }, /*#__PURE__*/_react["default"].createElement("div", null, it.icon), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeCircle, {
+      color: getColor(it.legend)
+    }), /*#__PURE__*/_react["default"].createElement(_commonStyles.GaugeLegend, null, it.legend + ' %'));
+  })));
+};
+var _default = exports["default"] = GaugeChart;

package/core/gauge-chart/GaugeChart.stories.d.ts

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import GaugeChart from './GaugeChart';
+declare const meta: Meta<typeof GaugeChart>;
+export default meta;
+type Story = StoryObj<typeof GaugeChart>;
+export declare const gaugeChart: Story;
+export declare const gaugeChartWithoutLegend: Story;
+export declare const gaugeChartWithLabelAndTooltip: Story;

package/core/types.d.ts

@@ -102,6 +102,10 @@ export type PictorialEntryData = {
     value: number;
     symbol: string;
 };
+export type GaugeData = {
+    value: number;
+    name: string;
+};
 export type EntryDataNTuples = Array<EntryData[]>;
 export type DomainValues = {
     min: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "amazing-react-charts",
-    "version": "1.2.2",
+    "version": "1.2.3",
     "description": "An amazing react charts package based in echarts",
     "main": "dist/index.js",
     "license": "MIT",
@@ -51,14 +51,14 @@
         "@testing-library/react": "16.2.0",
         "@testing-library/user-event": "14.6.1",
         "@types/jest": "29.5.14",
-        "@types/node": "22.13.4",
+        "@types/node": "22.13.5",
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@typescript-eslint/eslint-plugin": "8.24.1",
         "@typescript-eslint/parser": "8.24.1",
         "canvas": "2.11.2",
         "date-fns": "4.1.0",
-        "eslint": "9.20.1",
+        "eslint": "9.21.0",
         "eslint-config-prettier": "10.0.1",
         "eslint-import-resolver-typescript": "3.8.3",
         "eslint-plugin-import": "2.31.0",
@@ -68,13 +68,13 @@
         "flipper-ui": "0.35.6",
         "jest": "29.7.0",
         "jest-environment-jsdom": "29.7.0",
-        "prettier": "3.5.1",
+        "prettier": "3.5.2",
         "ramda": "0.30.1",
         "react": "18.3.1",
         "react-dom": "18.3.1",
         "storybook": "8.5.8",
         "styled-components": "6.1.15",
-        "ts-jest": "29.2.5",
+        "ts-jest": "29.2.6",
         "ts-node": "10.9.2",
         "typescript": "5.7.3",
         "typescript-eslint": "8.24.1",

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

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